拖放無法正常運行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

但我會記住您，您不能在對象中使用鼠標事件。 鼠標單擊對象