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

微信小程序实现图片双滑缩放大小

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

导语： 在做小程序开发的过程中，后端传来一张图片地图，需要实现双手指滑动，使图片缩放，最终得出了一下代码： js ：

 

在做小程序开发的过程中，后端传来一张图片地图，需要实现双手指滑动，使图片缩放，最终得出了一下代码：

  js ：
复制代码
Page({   data: {     touch: {       distance: 0,       scale: 1,       baseWidth: null,       baseHeight: null,       scaleWidth: null,       scaleHeight: null     }   },   touchStartHandle(e) {     // 单手指缩放开始，也不做任何处理 
    if (e.touches.length == 1) {       console.log("单滑了")       return     }     console.log('双手指触发开始')     // 注意touchstartCallback 真正代码的开始 
    // 一开始我并没有这个回调函数，会出现缩小的时候有瞬间被放大过程的bug 
    // 当两根手指放上去的时候，就将distance 初始化。 
    let xMove = e.touches[1].clientX - e.touches[0].clientX;     let yMove = e.touches[1].clientY - e.touches[0].clientY;     let distance = Math.sqrt(xMove * xMove + yMove * yMove);     this.setData({       'touch.distance': distance,     })   },   touchMoveHandle(e) {     let touch = this.data.touch     // 单手指缩放我们不做任何操作 
    if (e.touches.length == 1) {       console.log("单滑了");       return     }     console.log('双手指运动开始')     let xMove = e.touches[1].clientX - e.touches[0].clientX;     let yMove = e.touches[1].clientY - e.touches[0].clientY;     // 新的 ditance 
    let distance = Math.sqrt(xMove * xMove + yMove * yMove);     let distanceDiff = distance - touch.distance;     let newScale = touch.scale + 0.005 * distanceDiff     // 为了防止缩放得太大，所以scale需要限制，同理最小值也是 
    if (newScale >= 2) {       newScale = 2     }     if (newScale <= 0.6) {       newScale = 0.6     }     let scaleWidth = newScale * touch.baseWidth     let scaleHeight = newScale * touch.baseHeight     // 赋值 新的 => 旧的 
    this.setData({       'touch.distance': distance,       'touch.scale': newScale,       'touch.scaleWidth': scaleWidth,       'touch.scaleHeight': scaleHeight,       'touch.diff': distanceDiff     })   },   load: function (e) {     // bindload 这个api是<image>组件的api类似<img>的onload属性 
    this.setData({       'touch.baseWidth': e.detail.width,       'touch.baseHeight': e.detail.height,       'touch.scaleWidth': e.detail.width,       'touch.scaleHeight': e.detail.height     });   } })
复制代码

然后将新获得的图片宽度和高度赋值给图片即可实现滑动缩放

  wxml：

<image mode='scaleToFill' src='../../../images/01.jpg' bindtouchstart='touchStartHandle' bindtouchmove='touchMoveHandle' bindload='load' style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px"></image>

最后，通过手机预览，就会发现已达到预想的效果！



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

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

微信小程序官方微信

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