Javascript 拖放操作无法正常运行processing.js

我想做的是，当鼠标被按下时，让白色的方块在画布上移动，但它不起作用。我知道我错过了什么，请你帮助我。这是我的密码：

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();

}

对象o；
int[]back=新int[3][3]；
int pad=10，bs=100//len=焊盘*（背面长度+1）+bs*背面长度；扎迪纳米奇诺酒店
布尔阻力=假；
无效设置（）{
尺寸（400400）；
仰泳（）；
o=新对象（）；
}
作废提款（）{
rectt（0，0，宽度，高度，颜色（100））；
对于（int row=0；row，您可以在此处找到答案：

但我会记住你不能在对象中使用鼠标事件。
以后，请确切地告诉我们您的代码的用途，以及您说代码不起作用时的确切含义

但是，让我们运行一下您的代码，看看发生了什么

首先，将类命名为
对象是一个非常糟糕的主意。它实际上可能不会伤害任何东西，尤其是使用Processing.js，但比抱歉更安全。因此，我将把它重命名为
矩形

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

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

使用第一组坐标绘制矩形。但在
矩形
类中还有第二组坐标：

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

您在拖动逻辑中使用了第二个集合，但从未使用它们来绘制矩形。更一般地说，您似乎从未使用
show（）
函数。您希望该矩形显示在哪里

此外，您只实例化了一个
矩形
实例。在for循环中绘制的矩形与您创建的
矩形
没有任何关系

所以要解决你的问题，你需要做一些事情

步骤1:为要绘制到屏幕上的每个矩形创建一个
矩形的实例。换句话说，您需要创建一个
数组列表
，其中包含9个
矩形
实例，而不是一个

把这个放在草图的顶部：

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

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

步骤2:然后，您可以缩短
draw（）
函数，在
ArrayList
中的
矩形
实例上循环并绘制它们：

void draw() {

  background(100);

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

步骤3:修改
show（）
函数，以包含基于鼠标位置为
矩形上色的逻辑：

  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));
    }
  }

请注意，我是在常规处理中完成的，而不是在Processing.js中完成的，因此您可能需要进行一些小的调整，比如使用
mouseIsPressed
而不是
mouseipressed
。但是基本步骤是相同的：您需要在
矩形
类中移动逻辑，然后需要使用其中的变量该类用于绘制每个矩形

如果你在某个特定的步骤上遇到困难，那么请发布另一个问题和更新的代码，并描述你希望代码做什么，它做什么，以及这两件事有何不同。祝你好运

void draw() {

  background(100);

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

  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));
    }
  }

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