javascript 尝试使图像在单击时触发函数- p5.js

e4yzc0pl 于 2023-02-21 发布在 Java

关注(0)|答案(2)|浏览(150)

我正在为一门艺术课做一个项目，用一个交互式画布。我的目标是让小动物发出声音，当它们被点击时“移动”。我试图在不创建类的情况下完成这个项目，因为出于某种原因，我不能在类中使用图像。我试图尽可能简单地完成这个项目。
我所说的“移动”，是我试图让一个背景的图像出现在它们上面，动物以不同的姿势。默认的背景是有动物的风景，然后当鼠标在它们上面时，一个不同的图像会显示，动物以不同的姿势。
TLDR：需要功能，当鼠标在某个区域，它会显示图像和播放声音。

function preload() {
  birdsSound = loadSound("sounds/birds.mp3");
  backgrnd = loadImage("images/backgrnd.png");
  birdsImage = loadImage("images/birds.png");
}

function setup() {
  createCanvas(1000, 750);
  birdsImage.mouseOver(birdsFUNC);

}

function draw() {
  image(backgrnd,0,0);

}

function birdsFUNC() {
    birdsSound.play();
    image(birdsImage,0,0);
}

我还要补充一点，我对MATLAB以外的任何编程都是非常陌生的，所以p5是全新的，就像我五岁一样给我解释一下。

JavaScript

来源：https://stackoverflow.com/questions/70059507/trying-to-make-an-image-trigger-a-function-on-click-p5-js

2条答案

按热度按时间

u5i3ibmn1#

p5.js中的图像（使用loadImage()创建的p5.Image对象），不是画布中具有位置的图形元素。它只是可以绘制到画布的图像的像素数据。p5.js中的图像和所有其他图形元素都绘制到immediate mode中的画布。因此也不是画布上有位置的持久化元素。为了在特定的图形元素上实现鼠标悬停或点击检测，您必须根据鼠标位置自己实现（通过mouseX和mouseY），以及绘制相关图形元素的坐标。下面是一个简单的示例：

let img;
let imgHover;
let vel;
let pos;

function preload() {
    img = loadImage('https://www.paulwheeler.us/files/AnimFrame00.png');
    imgHover = loadImage('https://www.paulwheeler.us/files/AnimFrame01.png');
}

function setup() {
    createCanvas(windowWidth, windowHeight);
    vel = p5.Vector.random2D();
    pos = createVector(random(0, width - img.width), random(0, height - img.height));
}

function draw() {
    background(200);
    
    // check if the mouse is over the image or not
    let hover =
            mouseX >= pos.x && mouseX <= pos.x + img.width &&
            mouseY >= pos.y && mouseY <= pos.y + img.height;
    
    if (hover) {
        image(imgHover, pos.x, pos.y);
    } else {
        image(img, pos.x, pos.y);
    }
    
    // Move the image
    pos.add(vel);
    if (pos.x < 0) {
        pos.x = -pos.x;
        vel.x = -vel.x;
    } else if (pos.x + img.width > width) {
        pos.x = width - (pos.x + img.width - width) - img.width;
        vel.x = -vel.x;
    }
    if (pos.y < 0) {
        pos.y = -pos.y;
        vel.y = -vel.y;
    } else if (pos.y + img.height > height) {
        pos.y = height - (pos.y + img.height - height) - img.height;
        vel.y = -vel.y;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

赞(0）回复(0）举报 2023-02-21

ar7v8xwq2#

除了将图像写入画布并检查坐标之外，还有一种选择是使用createImg，然后向该元素添加mouseX处理程序：

let img;

function setup() {
  noLoop();
  noCanvas();
  img = createImg("http://placekitten.com/200/160", "kitten");
  img.mouseOver(() => console.log("mouse in"));
  img.mouseOut(() => console.log("mouse out"));
  img.mouseMoved(() => console.log("mouse moved"));
  img.mouseClicked(() => console.log("mouse clicked"));
  img.mouseReleased(() => console.log("mouse released"));
  img.mouseWheel(event => {
    event.preventDefault(); // prevent scrolling
    console.log("mouse wheel");
  });
}

function draw() {
  background(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

赞(0）回复(0）举报 2023-02-21

我来回答

javascript 尝试使图像在单击时触发函数- p5.js

2条答案

相关问题

热门标签

最新问答