在小程序中声诸，image 組件的 mode 有 12 種款咖，其中只有三種是縮放模式。而在這三種之中唤衫，只有 aspectFit 模式可以等比例縮放圖片婆赠，并顯示完整的圖片。此模式是保證圖片長邊完整地顯示出來，而手機屏幕寬度都較小休里，以 iphone 6 為例蛆挫，僅有 375 px。因此在小程序中瀏覽橫向的圖片或尺寸較大的圖片時妙黍，圖片細節(jié)就難以查看清楚（如下圖）悴侵。
因此能動態(tài)的通過手勢縮放圖片，就很有必要拭嫁。大眾比較熟悉的手勢是類似 app 中的雙指縮放可免，我們的目標也是在小程序中實現(xiàn)此效果。
愛范兒工程師在仔細研究微信小程序的所有事件后發(fā)現(xiàn)做粤，可以通過 touchmove 事件來實現(xiàn)雙指縮放圖片浇借。此技術(shù)的核心思想是根據(jù)兩只手指相對距離的變化來對圖片進行放大或縮小。因此只要能知道兩只手指相對距離的變化怕品，并能做到對圖片的動態(tài)縮放妇垢，就能實現(xiàn)我們想要的功能。
在手指接觸到屏幕并開始移動后肉康，對應(yīng)的組件上就會以約為 16ms（屏幕渲染頻率） 一次的速度不斷觸發(fā) touchmove
事件闯估，最后手指離開屏幕后，則會觸發(fā) touchend
事件迎罗。
touchmove
事件所包含的事件對象中有一個 touches
屬性睬愤，此屬性為當前停留在屏幕中的觸摸點信息的數(shù)組片仿。觸摸點的信息包括identifier
（觸摸點的標志符）纹安、pageX / pageY
（距離文檔左上角的距離）、clientX / clientY
（距離屏幕可顯示區(qū)域左上角距離）砂豌。通過 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
被觸發(fā)的時候塔粒，再計算一次 distance
。distanceDiff（newDistance - oldDistance）
即為兩次 touchmove 觸發(fā)的間隔間兩個手指相對距離的變化值筐摘。此值為正數(shù)時卒茬，表示兩指間距離在變大，即需要放大圖片咖熟，反之則為需要縮小圖片圃酵。
下面則需要確定一個規(guī)則，將 distance
的變化值與圖片放大或縮小的變化率關(guān)聯(lián)起來馍管。我們將圖片正常顯示時的尺寸定為基準值郭赐，即 baseWidth 和 baseHeight，圖片需要放大的倍數(shù)為 scale确沸，scale 的初始值和最小值為 1捌锭，最大值可根據(jù)需要來設(shè)置俘陷。
愛范兒工程師經(jīng)過多次試驗，確定了一個公式：
newScale = oldScale + 0.005 * distanceDiff
此公式中的 0.005 為圖片的縮放比例观谦。在實測中拉盾，使用 0.005 這個值可獲得比較良好的縮放體驗。
通過上面的步驟豁状，圖片上綁定 touchmove
事件后盾剩，每次 touchmove
被觸發(fā)后，我們都可以計算出新的圖片需要被放大的倍數(shù) scale替蔬。即每次 touchmove
被觸發(fā)后告私，都可以得到一組圖片被放大后的高寬值：scaleWidth（scale * baseWidth）、scaleHeight（scale * baseHeight）
承桥。
通過下面的方式就可以實現(xiàn)動態(tài)的更改圖片的高寬
<image class="image" style="width:{{ scaleWidth }}px; height:{{ scaleHeight }}px">
實現(xiàn)了圖片的縮放之后驻粟，還需要一個容器存放圖片，用 view
組件包裹 image
凶异，并設(shè)置 overflow:scroll
蜀撑，即可以做到自由的縮放和瀏覽圖片。但是微信小程序中有一個更合適的組件：scroll-view
剩彬，設(shè)置 scroll-x
和 scroll-y
為 true
酷麦，在放大圖片后，滑動瀏覽圖片時擁有比較良好的瀏覽體驗喉恋。
但是沃饶，目前版本（0.10.102800）中的 scroll-view
組件還存在一個渲染上的 bug，偶爾會出現(xiàn)界面閃動的現(xiàn)象轻黑。而在雙指縮放存在于scroll-view
中的圖片糊肤，極易觸發(fā)此 bug。此問題氓鄙，暫時只能等待微信進行修復馆揉，或者放棄 scroll-view
，即放棄更好的滑動瀏覽效果抖拦，而使用 view 組件升酣。
Hello小程序將與您共同成長。微信號：130870319 QQ群：40726600
