java - 如何在处理中绘制指向鼠标的线

我正在尝试制作一个程序，其中网格中的线像磁铁一样指向鼠标。我是Processing的初学者，有人可以为我提供有关如何执行此操作的教程，也可以给我一些代码并解释其作用吗？

int x1 = 0;
int x2 = 0;
int y1 = 0;
int y2 = 0;

void setup() {
  size(200, 200);
}

void draw() {
  background(255, 255, 0);
  x1 = (mouseX + 100) / 2;
  y1 = (mouseY + 100) / 2;
  x2 = -1 * x1 + 200;
  y2 = -1 * y1 + 200;
  line(x1, y1, x2, y2);
}

最佳答案

这个项目有很多解决方案。最简单的方法之一是使用Processing的PVector class。


  PVector类可用于二维或三维矢量。向量是具有大小和方向的实体。但是，PVector类存储矢量的分量（对于2D，x，y，对于3D，x，y，z）。幅度和方向是根据组件计算的，可以通过方法mag()和heading()访问。


通过x和y组件定义了Processing中的二维矢量：

PVector v = new PVector(xComponent, yComponent);

通过一些数学公式，您可以使用x分量和y分量确定幅度和方向。但是我们不需要确定这些。

下面，我附上了完整的解决方案代码。大多数内容对您来说都有意义。但是值得理解PVector的情况。

for中的嵌套void draw()循环包含表示每个网格顶点坐标的x和y变量。

我们首先将PVector v定义为由mouseX - x的x分量或鼠标的x位置与每个网格点之间的差给出的向量。类似地，mouseY - y给出的y分量具有相同的差异。

创建从PVector u初始化的变量v.setMag(15)会保存一个PVector，其方向与v相同，但长度仅为15。

现在画线。向量表示偏移量，而不是位置（在这种情况下为位置），因此从网格点到网格点的偏移量绘制直线是关键。

因此，line(x, y, x + u.x, y + u.y)，其中u.x和u.y是向量u的x和y分量。

void setup() {
  size(600, 600); // Set the size of the canvas to 600x600.
}

void draw() {
  background(255);
  stroke(200); // Set the stroke color to black

  int distVertLine = width / 10; // This variable defines the distance between each subsequent vertical line.
  for(int i = 0; i < width; i += distVertLine) {
    line(i, 0, i, height); // Draw a line at x=i starting at the top of the canvas (y=0) and going to the bottom (y=height)
  }

  int distHorizLine = height / 10; // This variable defines the distance between each subsequent vertical line.
  for(int i = 0; i < width; i += distHorizLine) {
    line(0, i, width, i); // Draw a line at y=i starting at the left of the canvas (x=0) and going to the right (x=width)
  }

  stroke(0); // Set the stroke to black.

  // Use a nested for loop to iterate through all grid vertices.
  for(int x = 0; x <= width; x += width/10) {
    for(int y = 0; y <= height; y += height/10) {
      PVector v = new PVector(mouseX - x, mouseY - y); // Define a vector that points in the direction of the mouse from each grid point.
      PVector u = v.setMag(15); // Make the vector have a length of 15 units.

      line(x, y, x + u.x, y + u.y); // Draw a line from the grid vertex to the terminal point given by the vector.
    }
  }
}