這篇文章給大家透過(guò)程式碼實(shí)例來(lái)講解一下微信小程式canvas拖曳元素功能的實(shí)作方法，希望對(duì)大家有幫助！

建立畫(huà)布

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

data資料

// 鼠標(biāo)狀態(tài)
statusConfig : {
      idle: 0,       //正常狀態(tài)
      Drag_start: 1, //拖拽開(kāi)始
      Dragging: 2,   //拖拽中
},
// canvas 狀態(tài)
canvasInfo : {
   // 圓的狀態(tài)
   status: 0,
   // 鼠標(biāo)在在圓圈里位置放里頭
   dragTarget: null,
   // 點(diǎn)擊圓時(shí)的的位置
   lastEvtPos: {x: null, y: null},
},

在畫(huà)布上畫(huà)兩個(gè)圓

onLoad: function (options) {
    // 設(shè)置畫(huà)布，獲得畫(huà)布的上下文 ctx
    this.getCanvas();
},
getCanvas(){
    // 根據(jù)id獲取canvas元素，微信小程序無(wú)法使用document， 我們需要使用wx.createSelectorQuery()來(lái)代替
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        // 設(shè)置畫(huà)布的比例
        canvas.width="500";
        canvas.height="600";
        const ctx = canvas.getContext('2d')
        // 在畫(huà)布上畫(huà)兩個(gè)圓，將ctx傳遞過(guò)去繪畫(huà)
        this.drawCircle(ctx, 100, 100, 20);
        this.drawCircle(ctx, 200, 200, 10);
        // 將我們繪畫(huà)的信息保存起來(lái)，之后移動(dòng)后需要清空畫(huà)板重新畫(huà)
        var circles = []
        circles.push({x: 100, y: 100, r: 20});
        circles.push({x: 200, y: 200, r: 10});
        // 不要忘記保存哦
        this.setData({
         circles
        })
      })
   },
// 畫(huà)圓
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()
},

#給畫(huà)佈設(shè)3個(gè)觸控事件

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

##手指觸摸動(dòng)作結(jié)束tap手指觸摸後馬上離開(kāi)

#類型	觸發(fā)條件
touchstart	手指觸摸動(dòng)作開(kāi)始
touchmove	#手指觸摸後移動(dòng)
touchcancel	手指觸摸動(dòng)作被打斷，如來(lái)電提醒，彈出窗口
touchend

#觸摸動(dòng)作開(kāi)始，若點(diǎn)擊點(diǎn)在圓中，改變canvasInfo中的訊息

handleCanvasStart(e){
    // 獲取點(diǎn)擊點(diǎn)的位置
    const canvasPosition = this.getCanvasPosition(e);
    // 判斷點(diǎn)擊點(diǎn)的位置在不在圈里，如果不在返回false， 在返回圓的信息
    const circleRef = this.ifInCircle(canvasPosition);
    const {canvasInfo, statusConfig} = this.data;
    // 在圓里的話，改變圓此時(shí)的狀態(tài)信息
    if(circleRef){
      canvasInfo.dragTarget = circleRef;
      //改變拖動(dòng)狀態(tài) idle -> Drag_start
      canvasInfo.status = statusConfig.Drag_start;
      canvasInfo.lastEvtPos = canvasPosition;
    }
    this.setData({
      canvasInfo
    })
  },
// 獲取點(diǎn)擊點(diǎn)的位置
getCanvasPosition(e){
    return{
      x: e.changedTouches[0].x,
      y: e.changedTouches[0].y
    }
},

// 看點(diǎn)擊點(diǎn)擊點(diǎn)是不是在圈里
ifInCircle(pos){
    const {circles} = this.data;
    for( let i = 0 ; i < circles.length; i++ ){
      // 判斷點(diǎn)擊點(diǎn)到圓心是不是小于半徑
      if( this.getDistance(circles[i], pos) < circles[i].r ){
        return circles[i]
      }
    }
    return false
  },
// 獲取兩點(diǎn)之間的距離（數(shù)學(xué)公式）
getDistance(p1, p2){
    return Math.sqrt((p1.x-p2.x) ** 2 + (p1.y-p2.y) ** 2)
}

手指觸摸後移動(dòng), 重新繪製圓形

handleCanvasMove(e){
    const canvasPosition = this.getCanvasPosition(e);
    const {canvasInfo, statusConfig, circles} = this.data;
    // 是拖拽開(kāi)始狀態(tài)，滑動(dòng)的大小大于5（防抖）
    if( canvasInfo.status === statusConfig.Drag_start && 
      this.getDistance(canvasPosition, canvasInfo.lastEvtPos) > 5){
        // 改變拖動(dòng)狀態(tài) 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，把圓重新畫(huà)一遍
            circles.forEach(c => this.drawCircle(ctx, c.x, c.y, c.r))
          })
    }

    this.setData({
      canvasInfo,
    })
  }

手指觸摸動(dòng)作結(jié)束,改變canvasInfo在狀態(tài)重新變成idle

 handleCanvasEnd(e){
    const {canvasInfo, statusConfig} = this.data;
    if( canvasInfo.status === statusConfig.Dragging ){
    // 改變拖動(dòng)狀態(tài) Dragging ->  idle
      canvasInfo.status = statusConfig.idle;
      this.setData({
        canvasInfo
      })
    }
  }

#跟著B(niǎo)站大佬一起學(xué)，不過(guò)微信小程式和html canvas的差距也已經(jīng)把我整憂鬱了

【相關(guān)學(xué)習(xí)推薦：

小程式開(kāi)發(fā)教學(xué)】

以上是透過(guò)實(shí)例了解小程式中怎麼實(shí)作canvas拖曳功能的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！