Question

我正在尝试使用Google地图风格的界面来查看大图像 - 基本上，捏缩放，通过拖动/滑动平移。 Hammer.js似乎是一个明显的候选人，但到目前为止，我一直无法让它正常工作。这是JSFiddle：http://jsfiddle.net/wfokcsm/qLu3T/2/

HTML：

<body>
    <div id="canvas">
        <div id="arrows">
        </div>
    </div>
</body>

CSS：

#canvas {
    border: 1px solid black;
    height: 320px;
    overflow: scroll;
    width: 320px;
}
#arrows {
    background:
        linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
        linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
        linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
    background-color: #e1ebbd;
    background-size: 128px 128px;
    transform: scale(1);
    transform-origin: 0, 0, 0;
    height: 2000px;
    width: 4000px;
}

使用Javascript：

var hammertime = new Hammer(document.body);
hammertime.on('pinch', function(e) {
    $('#arrows').css('transform', 'scale(' + e.gesture.scale + ')');
});

正如它编码的那样，在没有将preventDefault设置为true的情况下实例化Hammer，我可以滚动#arrows元素，但不能捏缩放。如果我将preventDefault设置为true，我可以捏缩放，但不能滚动。

我认为问题在于默认的本机滚动事件优先于Hammer所做的一切，包括检测预期的手势是否应该是捏合/变换。因此，即使Hammer在理论上被认为是智能地阻止了浏览器的默认事件，如果它检测到正确的事件，它永远不会有机会。滚动事件触发，或者Hammer强制关闭所有本机事件，允许其自身事件以本机滚动事件为代价接管。

我所看到的变通方法似乎涉及将Hammer初始化为身体以外的其他元素。这样会很好，除了需要缩放检测的元素也需要可滚动，所以看起来这样不起作用（除非我误解了这个解决方法）。我不确定这里有一个好的解决方案。我尝试使用Hammer拖动事件阻止所有本机事件并伪造自己滚动，但由于某种原因这似乎不起作用。

我能做些什么来让滚动和缩放变焦都能正常工作？使用不同的库，不同地配置Hammer，从头开始并完全手动检测夹点事件等？

Hammer检测变换或滚动事件，但不是两者

0 个答案: