PHP前端开发

微信小程序实现手指缩放图片代码分享

百变鹏仔 4天前 #前端问答
文章标签 缩放

用手指缩放图片。其实在实现这个需求以前,并不知道,微信公众号以及微信小程序里面有一个原生的api就自带这个特效,而且微信朋友圈也是用的这个api。wx.previewimage,就是它。预览图片。除了不能预览开发环境的本地电脑的图片外,你手机真机的图片,以及http服务器上的图片都是可以预览的,而且缩放功能做得很流畅。本文主要和大家介绍了微信小程序中实现手指缩放图片的示例代码。

先上源码,然后在逐步剖析:


Page({  data: {    touch: {      distance: 0,      scale: 1,      baseWidth: null,      baseHeight: null,      scaleWidth: null,      scaleHeight: null    }  },  touchstartCallback: function(e) {    // 单手指缩放开始,也不做任何处理    if(e.touches.length == 1) 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,    })  },  touchmoveCallback: function(e) {    let touch = this.data.touch    // 单手指缩放我们不做任何操作    if(e.touches.length == 1) 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 &gt;= 2) {      newScale = 2    }    if(newScale  旧的    this.setData({      'touch.distance': distance,      'touch.scale': newScale,      'touch.scaleWidth': scaleWidth,      'touch.scaleHeight': scaleHeight,      'touch.diff': distanceDiff    })  },  bindload: function(e) {   // bindload 这个api是<image>组件的api类似<img  alt="微信小程序实现手指缩放图片代码分享" >的onload属性   this.setData({     'touch.baseWidth': e.detail.width,     'touch.baseHeight': e.detail.height,     'touch.scaleWidth': e.detail.width,     'touch.scaleHeight': e.detail.height   })  }})</image>

wxml文件对应如下,就不做解释了:


<view>  <view>    <image></image>  </view></view>

写到这里发现,就算小程序用不了这个js,我的ht5页面也是可以用的,哈哈。