微信小程序中利用image组件实现图片手势缩放

微信小程序中利用image组件实现图片手势缩放，前端大神严灏的牛文，讲解了微信小程序中image组件的三种是缩放模式，三种之中，只有 aspectFit 模式可以等比例缩放图片，并显示完整的图片。

微信小程序中，image 组件的 mode 有 12 种，其中只有三种是缩放模式。而在这三种之中，只有 aspectFit 模式可以等比例缩放图片，并显示完整的图片。此模式是保证图片长边完整地显示出来，而手机屏幕宽度都较小，以 iphone 6 为例，仅有 375 px。因此在小程序中浏览横向的图片或尺寸较大的图片时，图片细节就难以查看清楚（如下图）。

因此能动态的通过手势缩放图片，就很有必要。大众比较熟悉的手势是类似 app 中的双指缩放，我们的目标也是在小程序中实现此效果。

爱范儿工程师在仔细研究微信小程序的所有事件后发现，可以通过 touchmove 事件来实现双指缩放图片。此技术的核心思想是根据两只手指相对距离的变化来对图片进行放大或缩小。因此只要能知道两只手指相对距离的变化，并能做到对图片的动态缩放，就能实现我们想要的功能。

在手指接触到屏幕并开始移动后，对应的组件上就会以约为 16ms（屏幕渲染频率） 一次的速度不断触发 touchmove 事件，最后手指离开屏幕后，则会触发 touchend 事件。

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;

接下来，我们在 WXML 中，将图片对象的高和宽绑定相应的动态值，我们就能实现手势缩放功能了：

用 scroll-view，还是用 view？

实现了图片的缩放之后，还需要一个容器存放图片。微信为视图组件提供了 `scroll-view` 和 `view` 两种容器容。但在目前阶段，两种容器都不能非常完美地实现手势缩放功能。

我们原本使用的方案是：利用 scroll-view，设置 scroll-x 和 scroll-y 属性为 true。这样做，可以在放大并滑动浏览图片时，拥有良好的浏览体验。

但是，我们发现 scroll-view 组件还存在缩放时出现界面闪动的现象的 bug。用双指手势缩放存在 scroll-view 容器中的图片，极易触发此 bug。

此问题只能等待微信官方进行修复。但在目前阶段，开发者也可以选择：

• 放弃 scroll-view，转而使用不带有良好滑动体验的 view 组件；

• 放弃使用手势缩放功能，转而开发「放大 – 缩小」按钮组件。

原文：http://www.ifanr.com/technotes/740404