实现小程序canvas拖拽功能
程序 实现 功能 拖拽 Canvas
2023-06-13 09:17:03 时间
组件地址
https://github.com/jasondu/wx…
如何实现
- 使用canvas
- 使用movable-view标签
由于movable-view无法实现旋转,所以选择使用canvas
需要解决的问题
- 如何将多个元素渲染到canvas上
- 如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层
- 如何实现拖拽元素
- 如何缩放、旋转、删除元素
看起来挺简单的嘛,就把上面这几个问题解决了,就可以实现功能了;接下来我们一一解决。
如何将多个元素渲染到canvas上
定义一个DragGraph类,传入元素的各种属性(坐标、尺寸…)实例化后推入一个渲染数组里,然后再循环这个数组调用实例中的渲染方法,这样就可以把多个元素渲染到canvas上了。
如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层
在DragGraph类中定义了判断点击位置的方法,我们在canvas上绑定touchstart事件,将手指的坐标传入上面的方法,我们就可以知道手指是点击到元素本身,还是删除图标或者变换大小的图标上了,这个方法具体怎么判断后面会讲解。
通过循环渲染数组判断是非点击到哪个元素到,如果点击中了多个元素,也就是多个元素重叠,那第一个元素就是最上层的元素啦。
如何实现拖拽元素
通过上面我们可以判断手指是否在元素上,当touchstart事件触发时我们记录当前的手指坐标,当touchmove事件触发时,我们也知道这时的坐标,两个坐标取差值,就可以得出元素位移的距离啦,修改这个元素实例的x和y,再重新循环渲染渲染数组就可以实现拖拽的功能。
如何缩放、旋转、删除元素
这一步相对比较难一点,我会通过示意图跟大家讲解。
我们先讲缩放和旋转
通过touchstart和touchmove我们可以获得旋转前的旋转后的坐标,图中的线A为元素的中点和旋转前点的连线;线B为元素中点和旋转后点的连线;我们只需要求A和B两条线的夹角就可以知道元素旋转的角度。缩放尺寸为A和B两条线长度之差。
计算旋转角度的代码如下:
- const centerX = (this.x + this.w) / 2; // 中点坐标 const centerY = (this.y + this.h) / 2; // 中点坐标 const diffXBefore = px - centerX; // 旋转前坐标 const diffYBefore = py - centerY; // 旋转前坐标 const diffXAfter = x - centerX; // 旋转后坐标 const diffYAfter = y - centerY; // 旋转后坐标 const angleBefore = Math.atan2(diffYBefore, diffXBefore) / Math.PI * 180; const angleAfter = Math.atan2(diffYAfter, diffXAfter) / Math.PI * 180; // 旋转的角度 this.rotate = currentGraph.rotate + angleAfter - angleBefore; 计算缩放尺寸的代码如下: // 放大 或 缩小 this.x = currentGraph.x - (x - px); this.y = currentGraph.y - (x - px);
未经允许不得转载:肥猫博客 » 实现小程序canvas拖拽功能
相关文章
- 【愚公系列】2022年08月 微信小程序-省市区三联动功能实现
- 微信小程序轮播图实现详解
- 手机java程序_2020年最流行的Java开发技术
- JAVA实现的小程序[通俗易懂]
- 【愚公系列】2022年08月 微信小程序-自定义导航栏功能的实现
- 小程序php开发_php实现简单登录和注册功能
- 【愚公系列】2022年10月 微信小程序-电商项目-确认订单功能实现
- 【愚公系列】2022年10月 微信小程序-电商项目-微信支付功能实现
- 「 『Java』注释与helloworld程序的解释 」
- IDA + GDBServer实现iPhone程序远程调试
- DeepMind开源薛定谔方程求解程序:从量子力学原理出发,TensorFlow实现
- 微信小程序调用客服php接口实现回复消息详解程序员
- java实现截屏程序详解编程语言
- java实现网络爬虫程序demo详解编程语言
- 在Linux中运行C语言程序(在linux中编写c程序)
- 程序Linux下编译C语言程序:实现新功能(linux下编译c)
- 时间Java程序操纵Redis实现过期时间设置(redisjava过期)
- Linux反汇编:实现你的程序分析梦想(linux反汇编软件)
- 处理Java程序中Redis数据过期策略实现(redisjava过期)
- 数据库VC程序访问MSSQL数据库的实现技术(vc 访问mssql)
- 远程加载程序集:MSSQL上的实现(mssql远程加载dll)
- 在Linux上实现Java程序的运行(linux运行java程序)
- 用ASP实现距指定日期的倒记时程序源码
- php论坛采集程序模拟登陆,抓取页面实现代码
- Java程序中添加播放MIDI音乐功能的实现方法详解
- Python实现过滤单个Android程序日志脚本分享
- Cocos2d-x学习入门之HelloWorld程序