js 双指放大、拖动图片

$(function (){
    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];

        var x = eleImg.offsetLeft;
        var y = eleImg.offsetTop;

        if (!events) {
            return;
        }

        event.preventDefault();

        // 第一个触摸点的坐标
        store.pageX = events.pageX;
        store.pageY = events.pageY;
        store.x = x;
        store.y = y;
        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];

        result.textContent = '触摸点数量：' + touches.length;

        if (events2) {
            // 双指移动
            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 > 4) {
                newScale = 4;
            }
            // 记住使用的缩放值
            store.scale = newScale;
            // 图像应用缩放效果
            eleImg.style.transform = 'scale('+ newScale +')';

            result.textContent = 'zoom: '+ zoom + ', apply scale: ' + newScale;
        }else{
            //console.log(store);
            var moveX = events.pageX - store.pageX;
            var moveY = events.pageY - store.pageY;
            var imagetop = store.x + moveX;
            var imageleft = store.y + moveY;
            $('#image').css({'top':imageleft+'px','left':imagetop+'px'});
        }
    });

    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;
    });
});

 

使用时，注意'#image'元素名称。。。