Chinaunix首页 | 论坛 | 博客
  • 博客访问: 565373
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: JavaScript

2019-03-27 09:59:28

点击(此处)折叠或打开

  1. var myCanvas, my_canvas;

  2. Page({

  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {

  7.     sx:'',
  8.     sy:'',
  9.     ex:'',
  10.     ey:'',
  11.   },

  12.   /**
  13.    * 生命周期函数--监听页面加载
  14.    */
  15.   onLoad: function(options) {
  16.     myCanvas = wx.createCanvasContext("myCanvas", this);
  17.     my_canvas = wx.createCanvasContext("my_canvas", this)

  18.   },

  19.   //触摸开始
  20.   start: function(e) {
  21.        console.log("开始位置的坐标", e.touches.length);
  22.     // console.log("开始位置的坐标", e.touches[0].x, e.touches[0].y)
  23.     myCanvas = wx.createCanvasContext("myCanvas", this);
  24.     this.setData({
  25.       startX: e.touches[0].x,
  26.       startY: e.touches[0].y
  27.     })
  28.   },
  29.   //改变位置
  30.   move: function(e) {
  31.     // console.log(e)
  32.     this.setData({
  33.       endx: e.changedTouches[0].x,
  34.       endy: e.changedTouches[0].y
  35.     })
  36.   },
  37.   //结束的位置
  38.   end: function(e) {
  39.     // // // console.log("结束的位置的坐标",e)
  40.     // console.log("结束的位置的坐标", e.changedTouches[0].x, e.changedTouches[0].y);
  41.     this.setData({
  42.       endx: e.changedTouches[0].x,
  43.       endy: e.changedTouches[0].y
  44.     })
  45.     myCanvas.moveTo(this.data.startX, this.data.startY);
  46.     myCanvas.lineTo(this.data.endx, this.data.endy);
  47.     myCanvas.setStrokeStyle(this.data.color ? this.data.color : "#000000");
  48.     var angle = Math.atan2(this.data.startY - this.data.endy, this.data.startX - this.data.endx) * 180 / Math.PI,
  49.      angle1 = (angle + 30) * Math.PI / 180,
  50.      angle2 = (angle - 30) * Math.PI / 180,
  51.      topX = 10 * Math.cos(angle1),
  52.      topY = 10 * Math.sin(angle1),
  53.      botX = 10 * Math.cos(angle2),
  54.      botY = 10 * Math.sin(angle2),

  55.      arrowX = this.data.endx - topX,
  56.      arrowY = this.data.endy - topY;
  57.      
  58.     myCanvas.moveTo(arrowX, arrowY);
  59.     myCanvas.moveTo(this.data.startX, this.data.startY);
  60.     myCanvas.lineTo(this.data.endx, this.data.endy);
  61.     arrowX = this.data.endx + topX;
  62.     arrowY = this.data.endy + topY;
  63.     myCanvas.moveTo(arrowX, arrowY);
  64.     myCanvas.lineTo(this.data.endx, this.data.endy);
  65.     arrowX = this.data.endx + botX;
  66.     arrowY = this.data.endy + botY;
  67.     myCanvas.lineTo(arrowX, arrowY);
  68.     myCanvas.setLineWidth(3);
  69.     myCanvas.stroke();

  70.     
  71.     myCanvas.draw(true);

  72. })



阅读(612) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册