站長資訊網
        最全最豐富的資訊網站

        通過實例了解一下小程序中怎么實現canvas拖動功能

        本篇文章給大家通過代碼實例來講解一下微信小程序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() },

        通過實例了解一下小程序中怎么實現canvas拖動功能

        給畫布設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       })     }   }

        通過實例了解一下小程序中怎么實現canvas拖動功能

        跟著B站大佬一起學,不過微信小程序和html canvas的差距也已經把我整抑郁了

        【相關學習推薦:小程序開發教程】

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产韩国精品一区二区三区久久| 精品久久久无码中文字幕| 九九精品成人免费国产片| 中文字幕精品无码一区二区| 99久久精品免费国产大片| 精品无码人妻一区二区三区| 久久久精品久久久久久 | 亚洲精品99久久久久中文字幕 | 最新国产精品精品视频| 国产亚洲精品精品国产亚洲综合| 国产91精品在线观看| 久久精品天天中文字幕人妻| 亚洲欧洲精品成人久久曰影片 | 一级成人精品h| 国产精品成人观看视频国产| 日本伊人精品一区二区三区| 最新在线精品国自av| 亚洲精品国产va在线观看蜜芽| 久久狠狠一本精品综合网| 国产精品青草视频免费播放| 2022精品国偷自产免费观看| 久久99国产精品久久| 国产亚洲欧洲精品| 国产精品久久久福利| 高清免费久久午夜精品| 国产精品爽爽va在线观看网站| 99国产欧美精品久久久蜜芽| 国产精品igao视频网网址| 久久精品蜜芽亚洲国产AV| 久久夜色精品国产噜噜麻豆| 无码少妇精品一区二区免费动态 | 四虎4hu永久免费国产精品| 国产亚洲精品观看91在线| 精品一区二区在线观看| 欧美亚洲精品在线| 欧美极品欧美精品欧美视频| 青青青青久久精品国产h| 亚洲精品人成在线观看| 高清日韩精品一区二区三区| 国产一区二区三区精品视频| 国产在线精品一区二区高清不卡|