拖放无法正常运行processing.js

Question

我要做的是，当用鼠标位置按下鼠标但不起作用时，使白色方块在画布上移动。 我知道我缺少一些东西，请您帮助我。 这是我的代码：

Object o;

int[][] back =new int[3][3];
int pad = 10, bs=100;            //len=pad*(back.length+1)+bs*back.length; za dinamichno resaizvane na ekrana
boolean drag = false;


void setup() {
  size(400, 400);
  noStroke();
  o = new Object();
}

void draw() {

  rectt(0, 0, width, height, color(100));

  for (int row=0; row<back.length; row++)
    for (int coll=0; coll<back[row].length; coll++) {
      float x = pad+(pad+bs)*coll;
      float y = pad+(pad+bs)*row;

      rectt(x, y, bs, bs, color(150));
      if (mouseX >=x && mouseX<=x+width/x*coll+bs
        && mouseY>=y && mouseY<=y+height/y*row+bs) {
        rectt(x, y, bs, bs, color(255, 0, 0));
      }
    }
   o.show();
   //o.over();
}



void rectt(float x, float y, float w, float h, color c) {
  fill(c);
  rect(x, y, w, h);
}


void mousePressed() {
  o.drag();

}

班级在这里：

class Object {
  float size = 50;
  float x;
  float y;
  //  boolean d = false;
  Object() {
    x = width -60;
    y = height -60;
  }

  void show() {
    fill(255);
    rect(x, y, size, size);
  }


  void drag() {
    if ( mouseX >= x && mouseX <= x+size && mouseY <= y+size && mouseY >= y && mousePressed ) {
      x = mouseX;
      y = mouseY;
    }
  }
}

Answer 1

将来，请准确告诉我们您的代码做什么，以及当您说它不起作用时的确切含义。

但是，让我们遍历您的代码并弄清楚发生了什么。

首先，给您的类Object命名是一个非常糟糕的主意。 它实际上可能不会造成任何伤害，尤其是使用Processing.js时，但比后悔要安全得多。 因此，我将其重命名为Rectangle 。

在这之后，你的主要问题来自于事实，你有两套 x和y坐标。 第一个来自您的循环：

float x = pad+(pad+bs)*coll;
float y = pad+(pad+bs)*row;

您可以使用第一组坐标来绘制矩形。 但是，然后在Rectangle类中有了第二组坐标：

x = width -60;
y = height -60;

您在拖动逻辑中使用了第二个集合，但随后再也不会使用它们来绘制矩形。 更一般而言，您似乎根本没有使用过show()函数。 您希望该矩形显示在哪里？

另外，您只能实例化一个Rectangle实例。 您在for循环中绘制的Rectangle与您创建的Rectangle没有任何关系。

因此，要解决问题，您需要做一些事情。

步骤1：为要绘制到屏幕上的每个矩形创建一个Rectangle实例。 换句话说，您需要创建一个包含9个Rectangle实例而不是一个的ArrayList 。

将其放在草图的顶部：

ArrayList<Rectangle> rectangles = new ArrayList<Rectangle>();

您永远不会使用back变量，因此可以摆脱它。

将其放入您的setup()函数中：

  for (int row=0; row<back.length; row++) {
    for (int coll=0; coll<back[row].length; coll++) {
      float x = pad+(pad+bs)*coll;
      float y = pad+(pad+bs)*row;

      Rectangle rectangle = new Rectangle(x, y);
      rectangles.add(rectangle);
    }
  }

此代码循环遍历坐标，并在该位置创建Rectangle的实例，然后将其添加到ArrayList 。 您还必须将参数添加到Rectangle构造函数中。

步骤2：然后，您可以缩短您的draw()函数，以简单地遍历ArrayList的Rectangle实例并绘制它们：

void draw() {

  background(100);

  for (Rectangle r : rectangles) {
    r.show();
  }
}

步骤3：修改show()函数，使其包含根据鼠标位置为Rectangle着色的逻辑：

  void show() {
    if (mouseX >=x && mouseX<=x+size && mouseY>=y && mouseY<=y+size) {
      //mouse is inside this Rectangle
      rectt(x, y, size, size, color(255, 0, 0));
    } else {
      rectt(x, y, size, size, color(150));
    }
  }

了解每个Rectangle如何根据其位置以及鼠标是否在其中来绘制自身。 我们所有的逻辑都在此类内，而不是分成两个地方。

步骤4：然后可以在if语句中添加拖动逻辑。 如果光标在Rectangle并且按下了鼠标，则您知道用户正在拖动Rectangle ：

//mouse is inside this Rectangle
if (mousePressed) {
    x = mouseX - size/2;
    y = mouseY - size/2;
}

请注意，我是在常规Processing（而不是Processing.js）中执行此操作的，因此您可能必须进行一些小的调整，例如使用mouseIsPressed而不是mousePressed 。 但是基本步骤是相同的​​：您需要在Rectangle类内移动逻辑，然后需要使用该类内的变量来绘制每个矩形。

如果您被困在特定的步骤上，那么请发布另一个问题，其中包含更新的代码以及对您期望代码执行的操作，执行的操作以及这两项有何不同的描述。 祝好运。

Answer 2

您可以在以下位置找到答案： https : //processing.org/examples/mousefunctions.html

但我会记住您，您不能在对象中使用鼠标事件。 鼠标单击对象