p5.js | mouseWheel()函数

只要鼠标或触摸板滚动导致垂直鼠标滚轮事件，就会调用mouseWheel()函数。可以访问此事件以确定滚动的属性。 delta 属性返回发生的滚动量。该值可以是正值或负值，具体取决于滚动的方向。

回调函数可能必须以“return false;”结尾。声明以防止可能与在不同浏览器上滚动相关的任何默认行为。

句法：

mouseWheel( event )

参数：此函数接受如上所述和如下所述的单个参数：

• event：这是一个可选的 WheelEvent 回调参数，可用于访问滚动细节。

以下示例说明了 p5.js 中的mouseWheel()函数：

示例1：使用滚动事件改变滚动时的颜色

let red = 0;
   
function setup() {
    createCanvas(750, 300);
    textSize(24);
}
   
function draw() {
    clear();
   
    // Apply fill based on the
    // red component
    fill(red, 0, 0)
   
    text("Scroll the mouse wheel to "
            + "change the red component"
            + " of the color", 20, 20);
      
    circle(150, 150, 200);
}
   
function mouseWheel(event) {
    
    // Change the red value according
    // to the scroll delta value
  red += event.delta;
}

输出：

示例 2：显示滚动属性

let scrollDelta = 0;
   
function setup() {
    createCanvas(500, 200);
    textSize(24);
    text("Scroll the mouse to see the"
        + " scroll details.", 10, 20);
}
   
function mouseWheel(event) {
    scrollDelta = event.delta;
   
    clear();
    deltaString = "Current mouse delta is: "
                    + scrollDelta;
    
    text(deltaString, 10, 20);
   
    if (scrollDelta > 0) {
        text("You are scrolling downwards", 10, 40);
    } 
    else {
        text("You are scrolling upwards", 10, 40);
    }
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/mouseWheel