登录  /  注册

通过实例了解一下小程序中怎么实现canvas拖动功能

青灯夜游
发布: 2021-11-29 19:23:40
转载
3530人浏览过

本篇文章给大家通过代码实例来讲解一下微信小程序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(&#39;#myCanvas&#39;)
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        // 设置画布的比例
        canvas.width="500";
        canvas.height="600";
        const ctx = canvas.getContext(&#39;2d&#39;)
        // 在画布上画两个圆,将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 = &#39;yellow&#39;
    ctx.lineWidth = 3
    ctx.arc(cx, cy, r, 0, 2 * Math.PI)
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
},
登录后复制

1.png

给画布设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(&#39;#myCanvas&#39;)
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvas = res[0].node
            canvas.width="500";
            canvas.height="600";
            const ctx = canvas.getContext(&#39;2d&#39;)
            // 遍历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
      })
    }
  }
登录后复制

2.gif

跟着B站大佬一起学,不过微信小程序和html canvas的差距也已经把我整抑郁了

【相关学习推荐:小程序开发教程

以上就是通过实例了解一下小程序中怎么实现canvas拖动功能的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号