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指向第二个图像的左上角。你确定那是你想要的吗？

可能不是，因为您希望能够分别检查两个图像。为了解决这个问题，我诚实地将x和y删除为全局变量，并在每个for循环中为每个图像进行计算。

另外，请注意，拥有一个名为Object的类是非常糟糕的做法。这可能不会破坏任何东西（特别是如果你使用的是JavaScript模式），但最多会让人感到困惑。最好使用更多描述性的类名，例如ImageAtPoint或其他。

在processing.js中创建不同的图像对象

1 个答案: