小程序中如何实现canvas拖动功能

这篇文章给大家分享的是有关小程序中如何实现canvas拖动功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创建画布

<canvas type="2d" id="myCanvas" style="height: 600px; width: 500px;"></canvas>

data数据

// 鼠标状态statusConfig : {      idle: 0,       //正常状态      Drag_start: 1, //拖拽开始      Dragging: 2,   //拖拽中},// canvas 状态canvasInfo : {   // 圆的状态   status: 0,   // 鼠标在在圆圈里位置放里头   dragTarget: null,   // 点击圆时的的位置   lastEvtPos: {x: null, y: null},},

在画布上画两个圆

onLoad: function (options) {    // 设置画布，获得画布的上下文 ctx    this.getCanvas();},getCanvas(){    // 根据id获取canvas元素，微信小程序无法使用document， 我们需要使用wx.createSelectorQuery()来代替    const query = wx.createSelectorQuery()    query.select('#myCanvas')      .fields({ node: true, size: true })      .exec((res) => {        const canvas = res[0].node        // 设置画布的比例        canvas.width="500";        canvas.height="600";        const ctx = canvas.getContext('2d')        // 在画布上画两个圆，将ctx传递过去绘画        this.drawCircle(ctx, 100, 100, 20);        this.drawCircle(ctx, 200, 200, 10);        // 将我们绘画的信息保存起来，之后移动后需要清空画板重新画        var circles = []        circles.push({x: 100, y: 100, r: 20});        circles.push({x: 200, y: 200, r: 10});        // 不要忘记保存哦        this.setData({         circles        })      })   },// 画圆drawCircle(ctx, cx, cy, r){    ctx.save()    ctx.beginPath()    ctx.strokeStyle = 'yellow'    ctx.lineWidth = 3    ctx.arc(cx, cy, r, 0, 2 * Math.PI)    ctx.stroke()    ctx.closePath()    ctx.restore()},

给画布设3个触控事件

<canvas type="2d" id="myCanvas"  bindtouchstart="handleCanvasStart"  bindtouchmove="handleCanvasMove"  bindtouchend="handleCanvasEnd" style="height: 600px; width: 500px;"></canvas>

触摸动作开始，若点击点在圆中，改变canvasInfo中的信息

handleCanvasStart(e){    // 获取点击点的位置    const canvasPosition = this.getCanvasPosition(e);    // 判断点击点的位置在不在圈里，如果不在返回false， 在返回圆的信息    const circleRef = this.ifInCircle(canvasPosition);    const {canvasInfo, statusConfig} = this.data;    // 在圆里的话，改变圆此时的状态信息    if(circleRef){      canvasInfo.dragTarget = circleRef;      //改变拖动状态 idle -> Drag_start      canvasInfo.status = statusConfig.Drag_start;      canvasInfo.lastEvtPos = canvasPosition;    }    this.setData({      canvasInfo    })  },// 获取点击点的位置getCanvasPosition(e){    return{      x: e.changedTouches[0].x,      y: e.changedTouches[0].y    }},// 看点击点击点是不是在圈里ifInCircle(pos){    const {circles} = this.data;    for( let i = 0 ; i < circles.length; i++ ){      // 判断点击点到圆心是不是小于半径      if( this.getDistance(circles[i], pos) < circles[i].r ){        return circles[i]      }    }    return false  },// 获取两点之间的距离（数学公式）getDistance(p1, p2){    return Math.sqrt((p1.x-p2.x) ** 2 + (p1.y-p2.y) ** 2)}

手指触摸后移动 , 重新绘制圆

handleCanvasMove(e){    const canvasPosition = this.getCanvasPosition(e);    const {canvasInfo, statusConfig, circles} = this.data;    // 是拖拽开始状态，滑动的大小大于5（防抖）    if( canvasInfo.status === statusConfig.Drag_start &&       this.getDistance(canvasPosition, canvasInfo.lastEvtPos) > 5){        // 改变拖动状态 Drag_start ->  Dragging        canvasInfo.status = statusConfig.Dragging;    }else if( canvasInfo.status === statusConfig.Dragging ){        canvasInfo.dragTarget.x = canvasPosition.x;        canvasInfo.dragTarget.y = canvasPosition.y;        // 重新绘制        const query = wx.createSelectorQuery()        query.select('#myCanvas')          .fields({ node: true, size: true })          .exec((res) => {            const canvas = res[0].node            canvas.width="500";            canvas.height="600";            const ctx = canvas.getContext('2d')            // 遍历circles，把圆重新画一遍            circles.forEach(c => this.drawCircle(ctx, c.x, c.y, c.r))          })    }    this.setData({      canvasInfo,    })  }

手指触摸动作结束 ,改变 canvasInfo在状态重新变成idle

 handleCanvasEnd(e){    const {canvasInfo, statusConfig} = this.data;    if( canvasInfo.status === statusConfig.Dragging ){    // 改变拖动状态 Dragging ->  idle      canvasInfo.status = statusConfig.idle;      this.setData({        canvasInfo      })    }  }

感谢各位的阅读！关于“小程序中如何实现canvas拖动功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！