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

admin

2023-3-3

微信小程序

小程序单指拖拽和双指操作是一个比较常用的功能，效果如下图
在这里插入图片描述

实现这三个功能，主要用三个触摸事件touchstart、touchmove、touchend
<view style="height: 100vh; width: 100vw">
<image
src="..."
style="transform: translate({{translateX}}px, {{translateY}}px) scale({{scale}}) rotate({{rotate}}deg);"
catch:touchstart="touchStart"
catch:touchmove="touchMove"
catch:touchend="touchEnd"
/>
</view>
<view style="height: 100vh; width: 100vw"> <image src="..." style="transform: translate({{translateX}}px, {{translateY}}px) scale({{scale}}) rotate({{rotate}}deg);" catch:touchstart="touchStart" catch:touchmove="touchMove" catch:touchend="touchEnd" /> </view>
```
<view style="height: 100vh; width: 100vw">
  <image
    src="..."
    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坐标单位px
  translateY: 0, // 位移y坐标单位px
  distance: 0, // 双指接触点距离
  scale: 1, // 缩放倍数
  rotate: 0, // 旋转角度
  oldRotate: 0, // 上一次旋转停止后的角度
  startMove: { // 起始位移距离
  x: 0,
  y: 0,
  },
  startTouches: [] // 起始点touch数组
  },
  })
  Page({ data: { translateX: 0, // 位移x坐标单位px translateY: 0, // 位移y坐标单位px distance: 0, // 双指接触点距离 scale: 1, // 缩放倍数 rotate: 0, // 旋转角度 oldRotate: 0, // 上一次旋转停止后的角度 startMove: { // 起始位移距离 x: 0, y: 0, }, startTouches: [] // 起始点touch数组 }, })
```
Page({
  data: {
    translateX: 0, // 位移x坐标 单位px
    translateY: 0, // 位移y坐标 单位px
    distance: 0, // 双指接触点距离
    scale: 1, // 缩放倍数
    rotate: 0, // 旋转角度
    oldRotate: 0, // 上一次旋转停止后的角度
    startMove: { // 起始位移距离
      x: 0,
      y: 0,
    },
    startTouches: [] // 起始点touch数组
  },
})
```
  单指拖拽
  - 单指拖拽比较简单，只需要记录移动的点坐标，然后减去起始点坐标，就可以求出针对页面的移动距离
  - touchstart
  - touchStart(e) {
    const touches = e.touches
    const { translateX, translateY } = this.data
    const { pageX, pageY } = touches[0]
    this.data.startMove = {
    x: pageX - translateX,
    y: pageY - translateY
    }
    this.data.startTouches = touches
    },
    touchStart(e) { const touches = e.touches const { translateX, translateY } = this.data const { pageX, pageY } = touches[0] this.data.startMove = { x: pageX - translateX, y: pageY - translateY } this.data.startTouches = touches },
```
touchStart(e) {
  const touches = e.touches
  const { translateX, translateY } = this.data
  const { pageX, pageY } = touches[0]
  this.data.startMove = {
    x: pageX - translateX,
    y: pageY - translateY
  }
  this.data.startTouches = touches
},
```
    - touchmove
    - touchMove(e) {
      const touches = e.touches
      const { pageX: onePageX, pageY: onePageY } = touches[0]
      const { startMove } = this.data
      this.setData({
      translateX: onePageX - startMove.x,
      translateY: onePageY - startMove.y
      })
      }
      touchMove(e) { const touches = e.touches const { pageX: onePageX, pageY: onePageY } = touches[0] const { startMove } = this.data this.setData({ translateX: onePageX - startMove.x, translateY: onePageY - startMove.y }) }
```
touchMove(e) {
  const touches = e.touches
  const { pageX: onePageX, pageY: onePageY } = touches[0]
  const { startMove } = this.data
  this.setData({
    translateX: onePageX - startMove.x,
    translateY: onePageY - startMove.y
  })
}
```
      双指缩放
      - 双指缩放的原理是根据两点坐标求出距离(勾股定理)，然后在用移动坐标的距离比就可以求出缩放倍数
      - touchmove
  - touchMove(e) {
    const touches = e.touches
    const { pageX: onePageX, pageY: onePageY } = touches[0]
    const { startMove, scale, distance: oldDistance, startTouches } = this.data
    if (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 = distance
    this.setData({
    scale: scale * (distance / (oldDistance || distance))
    })
    } else if (startTouches.length !== 2) {
    // 单指拖拽
    this.setData({
    translateX: onePageX - startMove.x,
    translateY: onePageY - startMove.y
    })
    }
    }
    touchMove(e) { const touches = e.touches const { pageX: onePageX, pageY: onePageY } = touches[0] const { startMove, scale, distance: oldDistance, startTouches } = this.data if (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 = distance this.setData({ scale: scale * (distance / (oldDistance || distance)) }) } else if (startTouches.length !== 2) { // 单指拖拽 this.setData({ translateX: onePageX - startMove.x, translateY: onePageY - startMove.y }) } }
```
touchMove(e) {
  const touches = e.touches
  const { pageX: onePageX, pageY: onePageY } = touches[0]
  const { startMove, scale, distance: oldDistance, startTouches } = this.data
  if (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 = distance
    this.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.touches
    const { pageX: onePageX, pageY: onePageY } = touches[0]
    const { startMove, scale, distance: oldDistance, startTouches, oldRotate } = this.data
    if (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 : rotate
    this.data.distance = distance
    this.setData({
    scale: scale * (distance / (oldDistance || distance)),
    + rotate
    })
    } else if (startTouches.length !== 2) {
    this.setData({
    translateX: onePageX - startMove.x,
    translateY: onePageY - startMove.y
    })
    }
    },
    touchMove(e) { const touches = e.touches const { pageX: onePageX, pageY: onePageY } = touches[0] const { startMove, scale, distance: oldDistance, startTouches, oldRotate } = this.data if (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 : rotate this.data.distance = distance this.setData({ scale: scale * (distance / (oldDistance || distance)), + rotate }) } else if (startTouches.length !== 2) { this.setData({ translateX: onePageX - startMove.x, translateY: onePageY - startMove.y }) } },
```
touchMove(e) {
  const touches = e.touches
  const { pageX: onePageX, pageY: onePageY } = touches[0]
  const { startMove, scale, distance: oldDistance, startTouches, oldRotate } = this.data
  if (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 : rotate
    this.data.distance = distance
    this.setData({
      scale: scale * (distance / (oldDistance || distance)),
+     rotate
    })
  } else if (startTouches.length !== 2) {
    this.setData({
      translateX: onePageX - startMove.x,
      translateY: onePageY - startMove.y
    })
  }
},
```
    - getAngle
    //getAngle
    getAngle(p1, p2) {
    const x = p1.pageX - p2.pageX
    const y = p1.pageY- p2.pageY
    return Math.atan2(y, x) * 180 / Math.PI
    }
    //getAngle getAngle(p1, p2) { const x = p1.pageX - p2.pageX const y = p1.pageY- p2.pageY return Math.atan2(y, x) * 180 / Math.PI }
```
//getAngle
getAngle(p1, p2) {
  const x = p1.pageX - p2.pageX
  const y = p1.pageY- p2.pageY
  return Math.atan2(y, x) * 180 / Math.PI
}
```
    - touchend
    - touchEnd() {
      // 保存当前旋转角度
      this.data.oldRotate = this.data.rotate
      },
      touchEnd() { // 保存当前旋转角度 this.data.oldRotate = this.data.rotate },
```
touchEnd() {
  // 保存当前旋转角度
  this.data.oldRotate = this.data.rotate
},
```
      总结
      - 代码片段https://developers.weixin.qq.com/s/0nS1tImU7Rs5
      - H5原理一致，只需改一下语法即可
      - 我这个只是基础版本，如果需要一些边界控制和还一些需求的限制，计算据边框距离即可，也可以用小程序的boundingClientRectAPI

作者：admin

链接：http://blog.mryxh.cn/2315.html

文章版权归作者所有，未经允许请勿转载。

THE END

打赏

二维码

海报

微擎部署独立系统操作流程（docker部署开发好的fasadmin项目）

<<上一篇

uniapp 之复制文本内容（兼app+h5）

下一篇>>

修改DateTimePicker默认样式

默认样式由于我的项目背景颜色比较深白色显得格格不入修改默认背景颜色 <el-date-picker class="picker" v-model="value1" ……

2024-02-27 admin

562 0 0

小程序开发之微信开发工具报错：unexpected loadSdkSubPackage case

前言：导入旧的taro小程序项目到微信开发工具便报错，首次导入。解决方案：提高基础库or更新微信开发工具or在【详情】里的【本地设置】勾选【启用独立域进行……

2023-12-01 admin

921 0 0

微信小程序代码混淆（代码被扒盗用上架，如何保证代码安全）

写在前面的话小编前段时间刷博客的时候看到了一篇这样的文章，大概的内容是开发者辛辛苦苦开发小半年的作品，上线没几天，就被人盗版上线了，甚至连代码都是……

2023-10-10 admin

1.8K+ 0 0

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

小程序单指拖拽和双指操作是一个比较常用的功能，效果如下图实现这三个功能，主要用三个触摸事件touchstart、touchmove、touchend <view style="height……

2023-03-03 admin

850 0 0

5月

星期六

这是一个奇怪的站长，白天睡大觉，晚上魂飘飘~~~

数据统计

本周更新

0篇

本月更新

0篇

用户数量

29位

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

单指拖拽

双指缩放

总结

修改DateTimePicker默认样式

小程序开发之微信开发工具报错：unexpected loadSdkSubPackage case

微信小程序代码混淆（代码被扒盗用上架，如何保证代码安全）

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