拖放操作不正常 processing.js

Question

我想做的是当用鼠标位置按下鼠标时，使白色方块在 canvas 周围移动，但它不起作用。我知道我错过了一些东西，请你帮助我。这是我的代码：

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 在这里：

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

您可以在这里找到答案：https://processing.org/examples/mousefunctions.html

但我会记住你不能在对象中使用鼠标事件。 mouse-click-on-object

Answer 2

以后，请准确告诉我们您的代码的作用，以及您说代码不起作用时的确切含义。

但是让我们运行通读一下您的代码并弄清楚发生了什么。

首先，将您的 class 命名为 Object 是一个非常糟糕的主意。它实际上可能不会造成任何伤害，尤其是使用 Processing.js，但安全总比后悔好。所以我要把它重命名为 Rectangle.

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

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

您使用第一组坐标绘制矩形。但是你在 Rectangle class:

中有第二组坐标

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

您在拖动逻辑中使用了第二组，但您从未使用它们来绘制矩形。更一般地说，您似乎根本没有使用 show() 函数。您希望那个矩形出现在哪里？

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

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

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

把这个放在草图的顶部：

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如何知道如何根据自己的位置和鼠标是否在里面来绘制自己。我们所有的逻辑都在这个 class 中，而不是分成两个地方。

第 4 步： 然后您可以在该 if 语句中添加拖动逻辑。如果光标在 Rectangle 内并且鼠标被按下，那么您知道用户正在拖动 Rectangle:

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

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

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

拖放操作不正常 processing.js

drag and drop is not working properly processing.js

javascript

processing.js