小程序开发中图片如何实现手势缩放

       在南昌小程序开发过程中如果需要用到坐标示意图的话，我们会发现在几寸的手机屏幕上是很难完整显示出来的，并且很难看清细节。因此，如果要在小程序中展示带有细节信息的图片，就需要为其加上缩放功能。而用双指张合手势进行缩放，是大部分智能手机用户都已经习惯了的缩放方法。今天小编就为大家简单介绍一下有关手势缩放功能的实现方法，希望对大家有所帮助！

       touchmove 事件所包含的事件对象中有一个 touches 属性，此属性为当前停留在屏幕中的触摸点信息的数组。触摸点的信息包括 identifier、pageX / pageY、clientX / clientY。通过 clientX / clientY 可确定手指在屏幕上的位置。

       xMove = e.touches[1].clientX - e.touches[0].clientX;

       yMove = e.touches[1].clientY - e.touches[0].clientY;

       distance = Math.sqrt(xMove * xMove + yMove * yMove);

       distance 即为两只手指之间的距离。将此距离储存下来，下一次 touchmove 被触发的时候，再计算一次 distance。distanceDiff（newDistance - oldDistance） 即为两次 touchmove 触发的间隔间两个手指相对距离的变化值。此值为正数时，表示两指间距离在变大，即需要放大图片，反之则为需要缩小图片。

       下面则需要确定一个规则，将distance的变化值与图片放大或缩小的变化率关联起来。我们将图片正常显示时的尺寸定为基准值，即baseWidth 和 baseHeight，图片需要放大的倍数为scale，scale 的初始值和最小值为 1，大值可根据需要来设置。

       公式如下：

       newScale = oldScale + 0.005 * distanceDiff

       此公式中的 0.005 为图片的缩放比例。在实测中，使用0.005这个值可获得比较良好的缩放体验。

       通过上面的步骤，图片上加上touchmove事件后，每次touchmove被触发后，我们都可以计算出新的图片需要被放大的倍数 scale。即每次 touchmove 被触发后，都可以得到一组图片被放大后的高宽值：scaleWidth（scale * baseWidth）、scaleHeight（scale * baseHeight）。

       通过下面的方式就可以实现动态的更改图片的高宽

       image class="image" style="width:{{ scaleWidth }}px; height:{{ scaleHeight }}px"，注：记得带上<>。

       实现图片缩放后，还需要一个容器存放图片，可以用view组件包裹image，并设置overflow:scroll，这样就可以做到自由缩放和浏览图片。

       关于图片手势缩放的实现方法就先介绍到这里，如果还有哪些不明白的地方，可随时来电咨询，易速网络专业为您解答！