在 processing.js 中制作不同的图像对象

Question

我正在尝试在浏览器中显示一些图像，当您单击图像时，您会看到在鼠标位置按下的图像，但是当我按下数组中的第一个元素时，没有任何反应，但是当我按下它显示的第二个元素但是当我再次按下第一个时，第二个元素再次显示。我认为数组的值存在一些问题，它只改变一次，不再改变。这是我的代码：

ArrayList<Object> objects = new ArrayList();

String pic ;
PImage images [];
PImage image;
int x;
int y;
int pad = 10;
int bs = 70;
String val ="index.jpg images.jpg";
String[] list;

void setup() {
  size(500, 500);
  change(val);
}

void draw() {
background(150);
  for (int i = 0; i < images.length; i++) { 
    x = pad + (bs+pad)*i;
    y = pad;
    image(images[i], x, y, bs, bs);
    over();
  }
  for (Object o : objects) {
    o.show();
  }
}

void over() {
  for (int i = 0; i < images.length; i++) { 
    if (mouseX >= x && mouseX <= x+width/x+bs*i && 
      mouseY > y && mouseY <= pad+bs) {
      fill(255);
      println(images[i]);
      image = images[i];
      rect(x, y, bs, bs);
    }
  }
}
void mousePressed() {
  for (int i = 0; i < images.length; i++) { 
    if (mouseX >= x && mouseX <= x+width/x+bs*i && 
      mouseY > y && mouseY <= pad+bs) {
      float xpos = mouseX;
      float ypos = mouseY;
      objects.add(new Object(xpos, ypos, image));
    }
  }
}

void mouseDragged() {
  for (Object o : objects) {
    o.moove();
  }
}


/* ---------------------------------------------*/

void change(String val) {
  list = split(val, " ");
  images = new PImage[list.length];
  for (int i = 0; i < list.length; i++) {    
    images[i] = loadImage(list[i]);
  }
}

对象在这里：

class Object{
float x;
float y;
PImage img;
int block = 50;

  Object(float tmpx, float tmpy, PImage tmpimg){
    x = tmpx;
    y = tmpy;
    img = tmpimg;
  }

void show (){
  image(img,x,y,block,block);
}

  void moove() {
      x = mouseX - block/2;
      y = mouseY - block/2;
  }

}

Answer 1

是时候调试您的代码了。

我会先在感兴趣的地方画圈。例如，在 x,y 处画一个圆表明 x,y 指向 second 图像的左上角。你确定那是你想要的吗？

可能不是，因为您希望能够分别检查两个图像。要解决这个问题，老实说，我只是摆脱了 x 和 y 作为全局变量，而只是在每个图像的每个 for 循环中进行计算。

另外，请注意，将 class 命名为 Object 是非常糟糕的做法。这可能不会破坏任何东西（特别是如果您使用 JavaScript 模式），但充其量它会令人困惑。最好使用更具描述性的 class 名称，例如 ImageAtPoint 或其他名称。

在 processing.js 中制作不同的图像对象

Make different image Objects in processing.js

javascript

arraylist

processing.js