You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.7 KiB
60 lines
1.7 KiB
const app = getApp()
|
|
|
|
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(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(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
|
|
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
|
|
})
|
|
}
|
|
},
|
|
|
|
touchEnd() {
|
|
this.data.oldRotate = this.data.rotate
|
|
},
|
|
|
|
getAngle(p1, p2) {
|
|
const x = p1.pageX - p2.pageX
|
|
const y = p1.pageY- p2.pageY
|
|
return Math.atan2(y, x) * 180 / Math.PI
|
|
}
|
|
})
|