微信小程序单指拖拽和双指缩放旋转

前言

小程序单指拖拽和双指操作是一个比较常用的功能，效果如下图

实现这三个功能，主要用三个触摸事件touchstart、touchmove、touchend

<view style="height: 100vh; width: 100vw"><imagesrc="..."style="transform: translate({{translateX}}px, {{translateY}}px) scale({{scale}}) rotate({{rotate}}deg);"catch:touchstart="touchStart"catch:touchmove="touchMove"catch:touchend="touchEnd"/>
</view>

用了以下变量

Page({data: {translateX: 0, // 位移x坐标 单位pxtranslateY: 0, // 位移y坐标 单位pxdistance: 0, // 双指接触点距离scale: 1, // 缩放倍数rotate: 0, // 旋转角度oldRotate: 0, // 上一次旋转停止后的角度startMove: { // 起始位移距离x: 0,y: 0,},startTouches: [] // 起始点touch数组},
})

单指拖拽

单指拖拽比较简单，只需要记录移动的点坐标，然后减去起始点坐标，就可以求出针对页面的移动距离
touchstart

touchStart(e) {const touches = e.touchesconst { translateX, translateY } = this.dataconst { pageX, pageY } = touches[0]this.data.startMove = {x: pageX - translateX,y: pageY - translateY}this.data.startTouches = touches
},

touchmove

touchMove(e) {const touches = e.touchesconst { pageX: onePageX, pageY: onePageY } = touches[0]const { startMove } = this.datathis.setData({translateX: onePageX - startMove.x,translateY: onePageY - startMove.y})
}

双指缩放

双指缩放的原理是根据两点坐标求出距离(勾股定理)，然后在用移动坐标的距离比就可以求出缩放倍数
touchmove

touchMove(e) {const touches = e.touchesconst { pageX: onePageX, pageY: onePageY } = touches[0]const { startMove, scale, distance: oldDistance, startTouches } = this.dataif (touches.length === 2 && startTouches.length === 2) {// 双指缩放const { pageX: twoPageX, pageY: twoPageY } = touches[1]// 求出当前双指距离const distance = Math.sqrt((twoPageX - onePageX) ** 2 + (twoPageY - onePageY) ** 2)this.data.distance = distancethis.setData({scale: scale * (distance / (oldDistance || distance))})} else if (startTouches.length !== 2) {// 单指拖拽this.setData({translateX: onePageX - startMove.x,translateY: onePageY - startMove.y})}
}

startTouches.length !== 2这个判断的原因是防止图片跳动，因为如果你两个手指触摸，然后离开一个手指，我是禁止拖拽的，只有双指都离开后再次触摸才能单指拖拽

双指旋转

双指旋转的原理是根据三角函数求出起始点的角度，然后再求出移动坐标的角度，相减然后加上上一次旋转的角度就等于你当前所需的选择角度
touchmove

touchMove(e) {const touches = e.touchesconst { pageX: onePageX, pageY: onePageY } = touches[0]const { startMove, scale, distance: oldDistance, startTouches, oldRotate } = this.dataif (touches.length === 2 && startTouches.length === 2) {const { pageX: twoPageX, pageY: twoPageY } = touches[1]const distance = Math.sqrt((twoPageX - onePageX) ** 2 + (twoPageY - onePageY) ** 2)
+   let rotate = this.getAngle(touches[0], touches[1]) - this.getAngle(startTouches[0], startTouches[1]) + oldRotate// 如果大于360度，就减去360
+   rotate = rotate > 360 ? rotate - 360 : rotatethis.data.distance = distancethis.setData({scale: scale * (distance / (oldDistance || distance)),
+     rotate})} else if (startTouches.length !== 2) {this.setData({translateX: onePageX - startMove.x,translateY: onePageY - startMove.y})}
},

getAngle

getAngle(p1, p2) {const x = p1.pageX - p2.pageXconst y = p1.pageY- p2.pageYreturn Math.atan2(y, x) * 180 / Math.PI
}

touchend

touchEnd() {// 保存当前旋转角度this.data.oldRotate = this.data.rotate
},

总结

代码片段https://developers.weixin.qq.com/s/0nS1tImU7Rs5
H5原理一致，只需改一下语法即可
我这个只是基础版本，如果需要一些边界控制和还一些需求的限制，计算据边框距离即可，也可以用小程序的boundingClientRectAPI

微信小程序单指拖拽和双指缩放旋转相关推荐

触摸屏单指拖拽、双指缩放、双指旋转
//没有触摸 if (Input.touchCount <= 0){return;}//单点拖动else if (Input.touchCount == 1){touch1 = Input.Ge ...
【微信小程序】可拖拽操作的“树状图”模块的制作和小程序经验的总结
去年三月份高中同学拉我做的微信小程序,尽管可能除了高一的时候做网页写过些js以后就再也没碰过(甚至高一时因为觉得"以后肯定不会做程序员"而拒绝学习代码),但得到了"你就写 ...
微信小程序实现报表（表格）双指缩放功能
实现前提要景: 1.本次实现双指缩放是用css3中的scale配合translate 实现 2.小程序不支持动态改变scale的大小即使在写在行内样式中也不生效(在调试中不生效)故需借助小程序自 ...
微信小程序scroll-view 横向拖拽scroll-left不起作用的情况
scroll-left设置需要在数据渲染之后 <scroll-view scroll-x="true" style="white-space: nowrap;hei ...
点击图片放大,实现移动端双指缩放,单指拖拽功能
记录一下最近项目中用到的点击图片出现一个遮罩层,同时放大图片显示,移动端可双指缩放图片并单指拖拽图片.再次点击遮罩层透明区域,遮罩层消失一.实现效果: 页面原图展示: 点击图片后: 二.代码实现: ...
微信小程序单页开发之 min-cli
转载自:https://www.diycode.cc/projects/meili/min-cli?sync=1 Min Cli 令小程序组件的开发和使用变得愉悦 ○ 最佳实践 MinUI,是基于 M ...
微信小程序单次请求上限20条的坑
近期在学习小程序云开发的时候,遇到一个坑,数据请求限制单次20条-- 即便是遍历请求会出现一个数据整合异常,因为每次拿到数据的时间不一致导致有先后顺序这里加入一个判断数组长度的方法,让新请求到的数据 ...
微信小程序地图篇（腾讯地图）
Welcome! 边学边记,完后整理.欢迎阅读. 文章目录 Welcome! 一.获取当前位置二.拖动地图动态获取数据三.动态显示视图中心附近的用户信息一.获取当前位置 # map.wxml & ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...

微信小程序单指拖拽和双指缩放旋转

前言

单指拖拽

双指缩放

双指旋转

总结

微信小程序单指拖拽和双指缩放旋转相关推荐

最新文章

热门文章