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

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

  • 作者： admin
  • 发布于 2018-08-01 13:41:28
  • 来源：  
  • 栏目：解决方案

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

 

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

 
  1. <view class="touch-container">
  2.   <view class="msg">{{msg}}</view>
  3.   <image
  4.     class="img"
  5.     src="{{src}}"
  6.     style="width: {{width}}rpx; height: {{height}}rpx; left: {{left}}rpx; top: {{top}}rpx; transform: translate(-50%, -50%) scale({{ scale }}) rotate({{ rotate }}deg);"
  7.     bindload="bindload"
  8.     catchtouchstart="touchstart"
  9.     catchtouchmove="touchmove"
  10.     catchtouchend="touchend"
  11.   ></image>
  12. </view>

wxss部分：

 
  1. page {
  2.  
  3.   width: 100%;
  4.  
  5.   height: 100%;
  6.  
  7.   background: #ffffff;
  8.  
  9. }
  10.  
  11. .touch-container {
  12.  
  13.   width: 100%;
  14.  
  15.   height: 100%;
  16.  
  17.   padding-top: 0.1px;
  18.  
  19. }
  20.  
  21. .msg {
  22.  
  23.   width: 100%;
  24.  
  25.   height: 60rpx;
  26.  
  27.   line-height: 60rpx;
  28.  
  29.   text-align: center;
  30.  
  31.   font-size: 30rpx;
  32.  
  33.   color: #666666;
  34.  
  35. }
  36.  
  37. .img {
  38.  
  39.   position: absolute;
  40.  
  41.   width: 690rpx;
  42.  
  43.   height: 300rpx;
  44.  
  45.   transform-origin: center center;
  46.  
  47. }

js部分：

 
  1. var canOnePointMove = false
  2.  
  3. var onePoint = {
  4.  
  5.   x: 0,
  6.  
  7.   y: 0
  8.  
  9. }
  10.  
  11. var twoPoint = {
  12.  
  13.   x1: 0,
  14.  
  15.   y1: 0,
  16.  
  17.   x2: 0,
  18.  
  19.   y2: 0
  20.  
  21. }
  22.  
  23. Page({
  24.  
  25.   data: {
  26.  
  27.     msg: '',
  28.  
  29.     src: 'http://img01.taopic.com/150508/318763-15050PU9398.jpg',
  30.  
  31.     width: 0,
  32.  
  33.     height: 0,
  34.  
  35.     left: 375,
  36.  
  37.     top: 600,
  38.  
  39.     scale: 1,
  40.  
  41.     rotate: 0
  42.  
  43.   },
  44.  
  45.   // 关闭上拉加载
  46.  
  47.   onReachBottom: function() {
  48.  
  49.     return
  50.  
  51.   },
  52.  
  53.   bindload: function(e) {
  54.  
  55.     var that = this
  56.  
  57.     var width = e.detail.width
  58.  
  59.     var height = e.detail.height
  60.  
  61.     if (width > 750) {
  62.  
  63.       height = 750 * height / width
  64.  
  65.       width = 750
  66.  
  67.     }
  68.  
  69.     if (height > 1200) {
  70.  
  71.       width = 1200 * width / height
  72.  
  73.       height = 1200
  74.  
  75.     }
  76.  
  77.     that.setData({
  78.  
  79.       width: width,
  80.  
  81.       height: height
  82.  
  83.     })
  84.  
  85.   },
  86.  
  87.   touchstart: function(e) {
  88.  
  89.     var that = this
  90.  
  91.     if (e.touches.length < 2) {
  92.  
  93.       canOnePointMove = true
  94.  
  95.       onePoint.x = e.touches[0].pageX * 2
  96.  
  97.       onePoint.y = e.touches[0].pageY * 2
  98.  
  99.     }else {
  100.  
  101.       twoPoint.x1 = e.touches[0].pageX * 2
  102.  
  103.       twoPoint.y1 = e.touches[0].pageY * 2
  104.  
  105.       twoPoint.x2 = e.touches[1].pageX * 2
  106.  
  107.       twoPoint.y2 = e.touches[1].pageY * 2
  108.  
  109.     }
  110.  
  111.   },
  112.  
  113.   touchmove: function(e){
  114.  
  115.     var that = this
  116.  
  117.     if (e.touches.length < 2 && canOnePointMove) {
  118.  
  119.       var onePointDiffX = e.touches[0].pageX * 2 - onePoint.x
  120.  
  121.       var onePointDiffY = e.touches[0].pageY * 2 - onePoint.y
  122.  
  123.       that.setData({
  124.  
  125.         msg: '单点移动',
  126.  
  127.         left: that.data.left + onePointDiffX,
  128.  
  129.         top: that.data.top + onePointDiffY
  130.  
  131.       })
  132.  
  133.       onePoint.x = e.touches[0].pageX * 2
  134.  
  135.       onePoint.y = e.touches[0].pageY * 2
  136.  
  137.     }else if (e.touches.length > 1) {
  138.  
  139.       var preTwoPoint = JSON.parse(JSON.stringify(twoPoint))
  140.  
  141.       twoPoint.x1 = e.touches[0].pageX * 2
  142.  
  143.       twoPoint.y1 = e.touches[0].pageY * 2
  144.  
  145.       twoPoint.x2 = e.touches[1].pageX * 2
  146.  
  147.       twoPoint.y2 = e.touches[1].pageY * 2
  148.  
  149.       // 计算角度，旋转(优先)
  150.  
  151.       var perAngle = Math.atan((preTwoPoint.y1 - preTwoPoint.y2)/(preTwoPoint.x1 - preTwoPoint.x2))*180/Math.PI
  152.  
  153.       var curAngle = Math.atan((twoPoint.y1 - twoPoint.y2)/(twoPoint.x1 - twoPoint.x2))*180/Math.PI
  154.  
  155.       if (Math.abs(perAngle - curAngle) > 1) {
  156.  
  157.         that.setData({
  158.  
  159.           msg: '旋转',
  160.  
  161.           rotate: that.data.rotate + (curAngle - perAngle)
  162.  
  163.         })
  164.  
  165.       }else {
  166.  
  167.         // 计算距离，缩放
  168.  
  169.         var preDistance = Math.sqrt(Math.pow((preTwoPoint.x1 - preTwoPoint.x2), 2) + Math.pow((preTwoPoint.y1 - preTwoPoint.y2), 2))
  170.  
  171.         var curDistance = Math.sqrt(Math.pow((twoPoint.x1 - twoPoint.x2), 2) + Math.pow((twoPoint.y1 - twoPoint.y2), 2))
  172.  
  173.         that.setData({
  174.  
  175.           msg: '缩放',
  176.  
  177.           scale: that.data.scale + (curDistance - preDistance) * 0.005
  178.  
  179.         })
  180.  
  181.       }
  182.  
  183.     }
  184.  
  185.   },
  186.  
  187.   touchend: function(e) {
  188.  
  189.     var that = this
  190.  
  191.     canOnePointMove = false
  192.  
  193.   }
  194.  
  195. })

json部分：

 
  1. "navigationBarTitleText": "识别手势",
  2.  
  3.   "navigationBarTextStyle":"black",
  4.  
  5.   "navigationBarBackgroundColor": "#FFF",
  6.  
  7.   "disableScroll": true



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

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
推荐版块
热门话题
热点关注
关注我们

微信小程序官方微信

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