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

用手指缩放图片。其实在实现这个需求以前，并不知道，微信公众号以及微信小程序里面有一个原生的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 >= 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      })    },    bindload: 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文件对应如下，就不做解释了：

<view class="container">    <view bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback">      <image src="../../resources/pic/cat.jpg" style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px" bindload="bindload"></image>    </view>  </view>

相关推荐：

php 缩放图片实例简介

JavaScript等比例缩放图片

php等比例缩放图片及剪切图片代码分享

以上就是微信小程序实现手指缩放图片代码分享的详细内容，更多内容请关注技术你好其它相关文章！