十三年專注于網站建設與互聯網應用開發，
全國服務熱線：
? ? ? ?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，這樣就可以做到自由縮放和瀏覽圖片。
? ? ? ?關于圖片手勢縮放的實現方法就先介紹到這里，如果還有哪些不明白的地方，可隨時來電咨詢，百恒網絡專業為您解答！
贛公網安備 36010202000052號
售前咨詢