捕捉Mac触控板变焦

Question

目前在我的应用程序中,我正在捕捉鼠标滚轮事件并在Canvas元素上执行放大或缩小.如果用户使用Mac并尝试使用触控板执行缩放,则没有事件,实际发生的是放大/缩小浏览器.

有没有办法捕捉使用触控板执行的缩放事件？

Answer 1

至少在Chrome中,触控板"捏合缩放"会触发滚轮/鼠标滚轮事件,就像按下ctrl键一样.您可以像任何其他wheel/mousewheel事件一样捕获此事件,并防止其发生默认情况.以下是使用jQuery的示例:

$("canvas").on("mousewheel", function(e) {
    if (e.ctrlKey) {
        e.preventDefault();
        e.stopImmediatePropagation();

        // perform desired zoom action here
    }
});

Answer 2

从Safari 9.1开始，您可以捕获来自OSX设备的缩放和旋转事件。有关更多信息，请阅读《GestureEvent类参考》。请注意，这仅适用于Safari，但是由于您的问题是关于“ Mac触控板缩放”的，因此我想这就是您想要的。

function zoom(e) {
  console.log(e.scale)
  e.preventDefault()
}
document.addEventListener('gesturestart', zoom)
document.addEventListener('gesturechange', zoom)
document.addEventListener('gestureend', zoom)

旁注：iOS上的Safari也支持这些事件。

Answer 3

仅使用 Javascript 无法捕获触控板的捏合放大/缩小