マウスホイールが動いたときに一度呼び出される関数です。
mouseWheel()
関数を宣言すると、ユーザーがマウスホイールでスクロールしたときに 自動的に実行されるコードブロックを設定できます:
function mouseWheel() {
// 実行するコード
}
mouseXや mouseYなどのマウスシステム変数は、 p5.jsによってmouseWheel()
が呼び出されたときに、 最新の値で更新されます:
function mouseWheel() {
if (mouseX < 50) {
// マウスが左側にある場合に実行するコード
}
if (mouseY > 50) {
// マウスが下部付近にある場合に実行するコード
}
}
パラメータevent
はオプションです。mouseWheel()
には常に マウススクロールイベントを説明するプロパティを持つ MouseEvent オブジェクトが渡されます:
function mouseWheel(event) {
// イベントを使用して実行するコード
console.log(event);
}
event
オブジェクトには多くのプロパティがあり、その中には delta
という、ユーザーが スクロールした距離を含むNumber
があります。例えば、ユーザーが上にスクロールすると、 event.delta
の値は5になるかもしれません。event.delta
は ユーザーが上にスクロールすると正の値、下にスクロールすると負の値になります。 macOSで「ナチュラル」スクロールが有効になっている場合、符号は逆になります。
ブラウザは様々なマウスイベントにデフォルトの動作を設定している場合があります。 例えば、一部のブラウザでは、ユーザーがマウスボタンを押しながらマウスを動かすと テキストがハイライトされます。このイベントのデフォルトの動作を防ぐには、 関数の最後にreturn false;
を追加してください。
注意:Safariでは、mouseWheel()
が期待通りに動作するためには、 関数の最後にreturn false;
を追加する必要がある場合があります。
実例
シンタックス
mouseWheel([event])
パラメーター
event
WheelEvent:
オプションのWheelEvent
引数。
Notice any errors or typos? Please let us know. Please feel free to edit src/events/mouse.js and open a pull request!