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

微信小程序中利用image组件实现图片手势缩放，前端大神严灏的牛文，讲解了微信小程序中image组件的三种是缩放模式，三种之中，只有 aspectFit 模式可以等比例缩放图片，并显示完整的图片。
原文：http://www.ifanr.com/technotes/740404
微信小程序中，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）。

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

<image class="image" style="width:{{ scaleWidth }}px; height:{{ scaleHeight }}px">

实现了图片的缩放之后，还需要一个容器存放图片，用 view 组件包裹 image，并设置overflow:scroll，即可以做到自由的缩放和浏览图片。
但是微信小程序中有一个更合适的组件：scroll-view，设置 scroll-x 和 scroll-y 为true，在放大图片后，滑动浏览图片时拥有比较良好的浏览体验。

但是，目前版本（0.10.102800）中的 scroll-view 组件还存在一个渲染上的 bug，偶尔会出现界面闪动的现象。而在双指缩放存在于 scroll-view 中的图片，极易触发此 bug。此问题，暂时只能等待微信进行修复，或者放弃 scroll-view，即放弃更好的滑动浏览效果，而使用 view 组件。