本篇文章给大家通过代码实例来讲解一下微信小程序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>
类型触发条件
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
触摸动作开始，若点击点在圆中，改变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 }) } }
跟着b站大佬一起学，不过微信小程序和html canvas的差距也已经把我整抑郁了
【相关学习推荐：小程序开发教程】
以上就是通过实例了解一下小程序中怎么实现canvas拖动功能的详细内容。