移動端雙指縮放圖片JS事件的實踐心得

一、Chrome瀏覽器雙指觸摸的模擬

結果是模擬不了。

頁面整體縮放行為是可以通過按住Shift鍵+頁面左鍵模擬的，但是，實際上，還是一個觸摸點，因此無法模擬雙指縮放行為。

除非是有觸摸板，或者屏幕就是觸摸屏。

否則，只能連手機進行調試了。

 

二、觸摸屏與event.touches

在觸屏設備下，要判斷是單指還是多指操作，可以通過 event.touches 數組對象的長度判斷。

例如：

document.addEventListener('touchstart', function (event) { var touches = event.touches; if (touches.length == 1) { console.log('單指'); } else if (touches.length >= 2) { console.log('多指'); } });

按照我們的理解，上面的邏輯應該是無懈可擊的。

實際上並不是。

我一開始也是在 'touchstart' 事件中判斷是單指還是雙指，結果發現了奇怪的現象，有時候是單指，有時候是雙指，雙指復現的概率可能不到1成。

這可真是奇怪了。

后來一番測試，終於弄清楚原因了。

只有當兩個指頭同時觸摸屏幕的時候，才能在touchstart事件中被識別為雙指操作。

這太難了，沒有誰的兩個指頭是一樣長的，很難同一時間戳中屏幕的。

因此，雙指事件的判斷需要在 touchmove 事件中才行。

https://www.tmojm.com 創業加盟網

三、雙指行為的判斷

代碼如下：

document.addEventListener('touchmove', function (event) { if (event.touches && event.touches.length == 2) { console.log('雙指在移動'); } });

 

四、雙指縮放功能的實現

雙指縮放功能的實現的難點就是縮放比例的計算。

event.touches 中的每一項都是觸摸點對象，包含了觸碰的元素以及觸摸點的坐標。

其中，觸摸點的坐標就可以用來計算縮放比例。

我們記錄下第一次雙指行為發生時候的兩個手指點的坐標值，於是就可以計算出這兩個指頭之間的距離；

然后繼續 touchmove 的時候，實時計算出新的兩個手指的坐標距離。

一開始的距離/現在的距離 = 應該縮放的比例。

如下圖所示：

實例演示

假設頁面上有一張圖片元素，要實現這種圖片的雙指縮放預覽效果：

<img id="image" src="1.png">

則可以試試使用下面所示的js代碼：

var eleImg = document.querySelector('#image'); var store = { scale: 1 }; // 縮放事件的處理 eleImg.addEventListener('touchstart', function (event) { var touches = event.touches; var events = touches[0]; var events2 = touches[1]; event.preventDefault(); // 第一個觸摸點的坐標 store.pageX = events.pageX; store.pageY = events.pageY; store.moveable = true; if (events2) { store.pageX2 = events2.pageX; store.pageY2 = events2.pageY; } store.originScale = store.scale || 1; }); document.addEventListener('touchmove', function (event) { if (!store.moveable) { return; } event.preventDefault(); var touches = event.touches; var events = touches[0]; var events2 = touches[1]; // 雙指移動 if (events2) { // 第2個指頭坐標在touchmove時候獲取 if (!store.pageX2) { store.pageX2 = events2.pageX; } if (!store.pageY2) { store.pageY2 = events2.pageY; } // 獲取坐標之間的舉例 var getDistance = function (start, stop) { return Math.hypot(stop.x - start.x, stop.y - start.y); }; // 雙指縮放比例計算 var zoom = getDistance({ x: events.pageX, y: events.pageY }, { x: events2.pageX, y: events2.pageY }) / getDistance({ x: store.pageX, y: store.pageY }, { x: store.pageX2, y: store.pageY2 }); // 應用在元素上的縮放比例 var newScale = store.originScale * zoom; // 最大縮放比例限制 if (newScale > 3) { newScale = 3; } // 記住使用的縮放值 store.scale = newScale; // 圖像應用縮放效果 eleImg.style.transform = 'scale('+ newScale +')'; } }); document.addEventListener('touchend', function () { store.moveable = false; delete store.pageX2; delete store.pageY2; }); document.addEventListener('touchcancel', function () { store.moveable = false; delete store.pageX2; delete store.pageY2; });

大家可以訪問這個地址（如果手機訪問本文）： https://www.zhangxinxu.com/study/202006/resize.html

雙指縮放效果就可以體驗了，最大比例做了限制，最小比例沒有做限制。

 

五、結語以及其他

demo頁面的 touchmove 沒有設置 passive:false 也沒有報錯，是因為 html 標簽設置了如下css：

html { touch-action: none; }