移動端雙指縮放圖片功能實踐

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

例如：

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

實際上，要出發上面的多指事件，只能在同事觸摸屏幕的時候才行。所以，雙指事件的判斷需要在touchmove事件中才行

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

實例演示：

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


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/wordpress/2020/06/mobile-event-touches-zoom-sacle/

他還有一個demo地址：https://www.zhangxinxu.com/study/202006/resize.html