鼠标悬停时更改图像

Question

我在P5中编码。 我的页面上有两个图像。 我试图对其进行编码，以至于当鼠标位于图像的左侧时，它会更改为其他图像。 具体来说就是这样：接下来，我们将创建一个悬停效果，当鼠标经过时，图像会发生变化。

我们将使用img1和img2这两个图像，并在鼠标经过它们时在这两个图像之间切换。 我们将使用变量imageX和imageY作为图像左上角的x和y位置。

我们需要一个if语句，看起来像这样：

if(XXX){
   image(img2, imageX, imageY);
} else {
   image(img1, imageX, imageY);
}

XXX是我们需要测试的条件。 我们需要获得与鼠标移过图像相对应的条件。

这有点像使球与屏幕的侧面碰撞。 我们需要依次检查双方。 让我们从左侧开始。 这是图像的最小x值，它对应于我们的imageX变量。 要在我们的图像上显示，mouseX必须大于imageX。

如果操作正确，每当鼠标位于图像左侧时，图像现在都会更改。

我能够通过编写一个函数来做到这一点，但是我无法通过if语句来完成任务，而这正是他们在书中想要的。

这是我的代码：

var img1;
var img2;

function setup() {
  createCanvas(600, 600);
  img1 = loadImage("assets/Slammer.jpg");
  img2 = loadImage("assets/rollercoaster.jpg")

}

function draw() {
  image(img1, 100, 100);
  image(img2, 300, 300);
}

  if mouseX > img2{
    image(img2, imageX, imageY);
  } else {
    image(img1, imageY, imageY);
  }

任何人都可以看到我在这里做错了什么，并帮助我吗？

谢谢。

Answer 1

这部分代码没有什么意义：

function draw() {
  image(img1, 100, 100);
  image(img2, 300, 300);
}

  if mouseX > img2{
    image(img2, imageX, imageY);
  } else {
    image(img1, imageY, imageY);
  }

在draw()函数中，要显示两个图像。 但是， if语句是外面 draw()函数，所以它只会发生一次，当第一次加载你的代码（我敢打赌导致一个错误，因为你不能调用image()函数，直到后setup()被调用） 。

无论如何，即使将代码移到了draw()函数中，也要比较mouseX （数字）和img2 （图像）。 您期望该比较做什么？ 数字如何大于图片？

听起来您想将图像的位置与鼠标的位置进行比较。 这是一个示例，如果鼠标在左侧，则绘制黑色，如果鼠标在右侧，则绘制白色：

function draw(){
   if(mouseX < width/2){
      background(0);
   }
   else{
      background(255);
   }
}