微信小程序的拖拽、缩放和旋转手势

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在开发中，有时会遇到像App中的手势那样的效果，下面就仿照App实现了一下。

wxml部分：


<view class="touch-container">
<view class="msg">{{msg}}</view>
<image
class="img"
src="{{src}}"
style="width: {{width}}rpx; height: {{height}}rpx; left: {{left}}rpx; top: {{top}}rpx; transform: translate(-50%, -50%) scale({{ scale }}) rotate({{ rotate }}deg);"
bindload="bindload"
catchtouchstart="touchstart"
catchtouchmove="touchmove"
catchtouchend="touchend"
></image>
</view>


wxss:


page {
width: 100%;
height: 100%;
background: #ffffff;
}
.touch-container {
width: 100%;
height: 100%;
padding-top: 0.1px;
}
.msg {
width: 100%;
height: 60rpx;
line-height: 60rpx;
text-align: center;
font-size: 30rpx;
color: #666666;
}
.img {
position: absolute;
width: 690rpx;
height: 300rpx;
transform-origin: center center;
}


js部分：

var canOnePointMove = false
var onePoint = {
x: 0,
y: 0
}
var twoPoint = {
x1: 0,
y1: 0,
x2: 0,
y2: 0
}
Page({
data: {
msg: '',
src: 'http://img01.taopic.com/150508/318763-15050PU9398.jpg',
width: 0,
height: 0,
left: 375,
top: 600,
scale: 1,
rotate: 0
},
// 关闭上拉加载
onReachBottom: function() {
return
},
bindload: function(e) {
var that = this
var width = e.detail.width
var height = e.detail.height
if (width > 750) {
height = 750 * height / width
width = 750
}
if (height > 1200) {
width = 1200 * width / height
height = 1200
}
that.setData({
width: width,
height: height
})
},
touchstart: function(e) {
var that = this
if (e.touches.length < 2) {
canOnePointMove = true
onePoint.x = e.touches[0].pageX * 2
onePoint.y = e.touches[0].pageY * 2
}else {
twoPoint.x1 = e.touches[0].pageX * 2
twoPoint.y1 = e.touches[0].pageY * 2
twoPoint.x2 = e.touches[1].pageX * 2
twoPoint.y2 = e.touches[1].pageY * 2
}
},
touchmove: function(e){
var that = this
if (e.touches.length < 2 && canOnePointMove) {
var onePointDiffX = e.touches[0].pageX * 2 - onePoint.x
var onePointDiffY = e.touches[0].pageY * 2 - onePoint.y
that.setData({
msg: '单点移动',
left: that.data.left + onePointDiffX,
top: that.data.top + onePointDiffY
})
onePoint.x = e.touches[0].pageX * 2
onePoint.y = e.touches[0].pageY * 2
}else if (e.touches.length > 1) {
var preTwoPoint = JSON.parse(JSON.stringify(twoPoint))
twoPoint.x1 = e.touches[0].pageX * 2
twoPoint.y1 = e.touches[0].pageY * 2
twoPoint.x2 = e.touches[1].pageX * 2
twoPoint.y2 = e.touches[1].pageY * 2
// 计算角度，旋转(优先)
var perAngle = Math.atan((preTwoPoint.y1 - preTwoPoint.y2)/(preTwoPoint.x1 - preTwoPoint.x2))*180/Math.PI
var curAngle = Math.atan((twoPoint.y1 - twoPoint.y2)/(twoPoint.x1 - twoPoint.x2))*180/Math.PI
if (Math.abs(perAngle - curAngle) > 1) {
that.setData({
msg: '旋转',
rotate: that.data.rotate + (curAngle - perAngle)
})
}else {
// 计算距离，缩放
var preDistance = Math.sqrt(Math.pow((preTwoPoint.x1 - preTwoPoint.x2), 2) + Math.pow((preTwoPoint.y1 - preTwoPoint.y2), 2))
var curDistance = Math.sqrt(Math.pow((twoPoint.x1 - twoPoint.x2), 2) + Math.pow((twoPoint.y1 - twoPoint.y2), 2))
that.setData({
msg: '缩放',
scale: that.data.scale + (curDistance - preDistance) * 0.005
})
}
}
},
touchend: function(e) {
var that = this
canOnePointMove = false
}
})


json部分：


"navigationBarTitleText": "识别手势",
"navigationBarTextStyle":"black",
"navigationBarBackgroundColor": "#FFF",
"disableScroll": true