十三年專注于網(wǎng)站建設(shè)與互聯(lián)網(wǎng)應(yīng)用開發(fā)，
全國服務(wù)熱線：
? ? ? ?touchmove 事件所包含的事件對象中有一個 touches 屬性，此屬性為當(dāng)前停留在屏幕中的觸摸點信息的數(shù)組。觸摸點的信息包括 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 被觸發(fā)的時候，再計算一次 distance。distanceDiff（newDistance - oldDistance） 即為兩次 touchmove 觸發(fā)的間隔間兩個手指相對距離的變化值。此值為正數(shù)時，表示兩指間距離在變大，即需要放大圖片，反之則為需要縮小圖片。
? ? ? ?下面則需要確定一個規(guī)則，將distance的變化值與圖片放大或縮小的變化率關(guān)聯(lián)起來。我們將圖片正常顯示時的尺寸定為基準(zhǔn)值，即baseWidth 和 baseHeight，圖片需要放大的倍數(shù)為scale，scale 的初始值和最小值為 1，大值可根據(jù)需要來設(shè)置。
? ? ? ?公式如下：
? ? ? ?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，這樣就可以做到自由縮放和瀏覽圖片。
? ? ? ?關(guān)于圖片手勢縮放的實現(xiàn)方法就先介紹到這里，如果還有哪些不明白的地方，可隨時來電咨詢，百恒網(wǎng)絡(luò)專業(yè)為您解答！
贛公網(wǎng)安備 36010202000052號
售前咨詢