Question

我正在使用Hammer.js在移动显示器上的图像上启用自定义捏缩放等。首先启用2手指捏缩放，然后用1手指平移图像，并可以正常工作，除了会在滚动窗口本身时产生问题：

完全禁止在一个图像上滚动移动显示。如果用户向下滚动显示屏并在图像本身上滑动，则滚动停止。当触摸/滑动图像外部（上方/下方）的区域时，只能完成窗口滚动。并且，如上所述，仅在用2个手指捏住图像之后，才用1个手指在图像中平移。因此，用一根手指在未缩放的图像上滑动会导致页面/窗口滚动完全停止。

我要完成的工作是（A）仅启用2个手指动作即可在缩放的图像上平移，以及（B）滑动1个手指在图像顶部以移动窗口/在正常移动时显示（当前，只有在用一根手指在图像外滑动时才会发生）。完成（A）和（B）的操作后，无论用户是否触摸和滑动Hammer.js控制的图像，只要用户使用一根手指在窗口上上下滚动，页面都应正常滚动在使用2根手指进行缩放后，可用2根手指平移图像本身...因此，2手指控件应影响图像，1手指控件（打开或关闭图像）应影响窗口。

我正在使用最初在here中找到的该例程来实例化图像的Hammer.js-control。我将如何编辑它（或在它之外需要什么其他JS）来实现上述效果？

var hammerIt = function (elm) {
    var el;
    var hammertime;
    var lastPosX;
    var lastPosY;
    var lastScale;
    var maxPosX;
    var maxPosY;
    var posX;
    var posY;
    var scale;
    var transform;

    hammertime = new window.Hammer(elm, {});
    hammertime.get('pinch').set({
        enable: true
    });

    posX = 0;
    posY = 0;
    scale = 1;
    lastScale = 1;
    lastPosX = 0;
    lastPosY = 0;
    maxPosX = 0;
    maxPosY = 0;
    transform = '';
    el = elm;

    hammertime.on('doubletap pan pinch panend pinchend', function (ev) {
        if (ev.type === 'doubletap') {
            transform = 'translate3d(0, 0, 0) scale3d(2, 2, 1) ';
            scale = 2;
            lastScale = 2;
            try {
                if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() !== 'matrix(1, 0, 0, 1, 0, 0)') {
                    transform = 'translate3d(0, 0, 0) scale3d(1, 1, 1) ';
                    scale = 1;
                    lastScale = 1;
                }
            } catch (err) {
                console.log(err);
            }
            el.style.webkitTransform = transform;
            transform = '';
        }

//pan
        if (scale !== 1) {
            posX = lastPosX + ev.deltaX;
            posY = lastPosY + ev.deltaY;
            maxPosX = Math.ceil((scale - 1) * el.clientWidth / 2);
            maxPosY = Math.ceil((scale - 1) * el.clientHeight / 2);
            if (posX > maxPosX) {
                posX = maxPosX;
            }
            if (posX < -maxPosX) {
                posX = -maxPosX;
            }
            if (posY > maxPosY) {
                posY = maxPosY;
            }
            if (posY < -maxPosY) {
                posY = -maxPosY;
            }
        }

//pinch
        if (ev.type === 'pinch') {
            scale = Math.max(0.999, Math.min(lastScale * (ev.scale), 4));
        }

        if (ev.type === 'pinchend') {
            lastScale = scale;
        }

//panend
        if (ev.type === 'panend') {
            lastPosX = posX < maxPosX
            ? posX
            : maxPosX;
            lastPosY = posY < maxPosY
            ? posY
            : maxPosY;
        }

        if (scale !== 1) {
            transform = 'translate3d(' + posX + 'px, ' + posY + 'px, 0) ' + 'scale3d(' + scale + ', ' + scale + ', 1)';
        }

        if (transform) {
            el.style.webkitTransform = transform;
        }
    });
};

Hammer.js：如何保持一根手指滚动窗口，两根手指捏/缩放/平移等等

0 个答案: