如何在p5.js中实现图片点击/悬停时添加绿色叠加层效果？

以下是修改后的完整代码，实现了移动图片的悬停绿色叠加，以及点击切换叠加层保持的效果：

let rodeBloedcel;

let x = 100;
let y = 100;
let xspeed = 2.5;
let yspeed = -1;
// 新增状态变量：跟踪悬停和点击状态
let isHovering = false;
let isClicked = false;

function preload() {
    rodeBloedcel = loadImage('Img/RodeBloedcel.png');
}

function setup() {
    createCanvas(800, 600);
}

function draw() {
    background('black');
    // 绘制图片
    image(rodeBloedcel, x, y, 100, 70);

    // 碰撞检测：判断鼠标是否在图片范围内
    isHovering = mouseX > x && mouseX < x + 100 && mouseY > y && mouseY < y + 70;

    // 如果悬停或已点击，绘制绿色半透明叠加层
    if (isHovering || isClicked) {
        fill(0, 255, 0, 100); // 绿色，透明度100（0-255）
        noStroke(); // 去掉矩形边框
        rect(x, y, 100, 70); // 与图片同尺寸的矩形叠加
    }

    // 原有移动逻辑
    x = x + xspeed;
    y = y + yspeed;

    if (x < 0 || x > width - 100) {
        xspeed = -xspeed;
    }

    if (y < 0 || y > height - 70) {
        yspeed = -yspeed;
    };
}

// 新增鼠标点击事件处理
function mousePressed() {
    // 如果点击时鼠标在图片范围内，切换点击状态
    if (mouseX > x && mouseX < x + 100 && mouseY > y && mouseY < y + 70) {
        isClicked = !isClicked;
    }
}

关键修改说明： #

• 状态变量：isHovering实时跟踪鼠标是否悬停在图片上，isClicked记录是否点击过图片（点击后切换状态）
• 碰撞检测：通过判断mouseX和mouseY是否落在图片的矩形区域（x到x+100，y到y+70）内，实现精准的交互范围判定
• 叠加层绘制：使用半透明绿色填充的矩形覆盖在图片上方，fill(0,255,0,100)中的最后一个参数是透明度，数值越小越透明
• 鼠标事件：mousePressed函数处理点击逻辑，点击图片时切换isClicked状态，实现点击后保持叠加层的效果

如果只需要悬停时显示叠加层，不需要点击保持，可以去掉isClicked变量和mousePressed函数，只保留isHovering的判断即可。

内容的提问来源于stack exchange，提问作者user20477407