捕捉Mac触控板缩放

Question

目前在我的应用程序中，我正在捕捉鼠标滚轮事件，并在画布元素上执行放大或缩小操作。如果用户使用Mac并尝试使用触摸板执行缩放，则不会发生任何事件，实际发生的是放大/缩小浏览器。

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

Answer 1

至少在Chrome中，触摸板“按压缩放”会触发一个滚轮/鼠标滚轮事件，就像按下了ctrl键一样。您可以像捕获任何其他轮子/鼠标轮事件一样捕获此事件，并防止其默认事件发生。下面是一个使用jQuery的示例：

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

        // perform desired zoom action here
    }
});

Answer 2

您可以从 Starting from Safari 9.1 devices捕获缩放和旋转事件。有关更多信息，请阅读GestureEvent Class Reference。请注意，这只适用于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

据我所知，触控板的收缩不会触发触摸或手势事件，因此Hammer.js不会检测到它。

我可以使用Hamster.js在Chrome中模拟夹点检测。它将触发鼠标滚轮事件，您可以使用增量来确定用户是放大还是缩小。

不过，这个解决方案在Safari中不起作用。