25

現在、私のアプリケーションでは、マウス ホイール イベントをキャッチし、Canvas 要素でズームインまたはズームアウトを実行しています。ユーザーが Mac を使用していて、トラックパッドでズームを実行しようとすると、イベントは発生せず、実際にブラウザのズームイン/ズームアウトが発生します。

トラックパッドで実行されたズーム イベントをキャッチする方法はありますか?

4

5 に答える 5

26

少なくともChromeでは、トラックパッドの「ピンチツーズーム」は、Ctrlキーが押されたように見えるホイール/マウスホイールイベントをトリガーします。他のホイール/マウスホイール イベントと同じように、このイベントをキャプチャして、デフォルトの発生を防ぐことができます。jQuery を使用した例を次に示します。

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

        // perform desired zoom action here
    }
});
于 2015-02-23T22:49:37.770 に答える
9

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 でもサポートされています。

于 2016-05-12T10:17:13.000 に答える
1

私の知る限り、トラックパッドのピンチはタッチまたはジェスチャ イベントをトリガーしないため、Hammer.js はそれを検出しません。

Hamster.js を使用して、Chrome でピンチ検出をシミュレートすることができました。マウス ホイール イベントをトリガーし、デルタを使用して、ユーザーがズームインまたはズームアウトしているかどうかを判断できます。

ただし、このソリューションは Safari では機能しませんでした。

于 2014-11-07T16:59:30.537 に答える
0

周りを見回した後、これは何か役に立ちますか? 議論の中で Web アプリと JavaScript の両方をカバーし、ピンチ イベントを検出するための可能な解決策として Hammer.js に来ます... ピンチを検出する最も簡単 な方法

于 2013-09-13T19:17:26.553 に答える
-8

Javascriptだけではトラックパッドのピンチズームイン/ズームアウトをキャッチする方法がありません

于 2013-09-08T14:06:46.733 に答える