Question

我在P5编码。我的页面上有两张图片。我试图将其编码为影响，当鼠标位于图像的左侧时，它会变为另一个图像。这是具体的：接下来我们将创建一个悬停在效果上，当鼠标经过它时图像会发生变化。

我们将使用2个图像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语句在<{strong>外面 draw()函数，所以它只在你的代码第一次加载时发生一次（我打赌它会导致错误，因为你可以＆＃39; t调用image()函数，直到调用setup()为止。

在任何情况下，即使您在draw()功能中移动了该代码，也要将mouseX（这是一个数字）与img2进行比较（这是一张图片）。你期望比较做什么？数字如何大于图像？

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

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

鼠标滚动

1 个答案: