您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2018-06-08 13:46:07
  • 来源:  
  • 栏目:解决方案

导语: 在开发中,有时会遇到像App中的手势那样的效果,下面就仿照App实现了一下。 wxml部分: <view c

 

在开发中,有时会遇到像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 

 

如有问题,请大家多多指教!



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部