javascript - 如何在下面的处理中创建一个图形器

Question

我想创建一个包含节点和仅连接圆周节点的线的图形

我试过了；没用

for (int i = 0; i < nodeX.length; i++) {
    fill(0);
    ellipse(nodeX[i], nodeY[i], 10, 10);
}

或者及格，必须有一个大小为(600, 360)的显示窗口，其中包含一个列数和行数相同(视频中为10)的网格。您的程序应该可以在不同大小和/或数量的分区下正常工作。

您在 VERY TOP 全局设置一个常量，如:

final int N_PARTITIONS = 10;

并在整个程序中使用它 (N_PARTITIONS)。即使标记将 N_PARTITIONS 的值更改为 5 或 8 或 15 或 ...(显然，当 N_PARTITIONS 更改为 15 时，应该有 15 行和 15 列)，您的程序也应该工作

当您点击显示窗口的任意位置时，直径为 10 的圆(以下称为节点)应显示在该点。之前点击的节点应该保留在屏幕上，并且应该有将每个节点与下一个节点连接起来的线(最后一个连接到第一个节点)。除了这些线(当然还有网格线)之外不应有其他线。

在(200, 400)到(300, 300)的三个点和直线上应该有节点绘制； (300, 300) 到 (60, 100);和 (60, 100) 到 (200, 400)。

Answer 1

从您描述预期输出的方式来看，网格线和由线连接的节点似乎无关。因此，您有两个任务要完成:

1. 用N_PARTITIONS 行和列线绘制网格，以及
2. 通过单击鼠标绘制并连接直径为 10 的圆。

前者相对容易。给定

final int N_PARTITIONS = 10;

我们需要横跨屏幕 10 行，沿屏幕向下 10 行。

在 void setup() 中，使用 size(600, 360); 将 Canvas 的大小设置为 600x360 像素。

---

让我们先处理屏幕上的绘图线。我们将使用 for 循环来完成此操作。

void draw() {
  int distVertLine = width / N_PARTITIONS; // This variable defines the distance between each subsequent vertical line.
  for(int i = distVertLine / 2; 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)
  }
}

上面，我们初始化了一个distVertLine变量来定义每条垂直线之间的水平距离。它的值为 width/N_PARTITIONS，因为我们将 Canvas 的宽度分成给定数量的分区。

在for 循环中，i 被初始化为distVertLine/2，因此网格线位于中心。

类似地，我们可以用水平线来做:

int distHorizLine = height / N_PARTITIONS; // This variable defines the distance between each subsequent vertical line.
for(int i = distHorizLine / 2; 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)
}

---

现在是节点和线。 Processing 中的圆由 circle(x, y, extent) 给出(查看文档 here)。

按下鼠标时，调用方法 void mousePressed()。每次按下时，我们希望将 x 和 y 值记录在一个数组中:

ArrayList nodeX = new ArrayList(); // ArrayLists are nice to use because they're expandable, unlike a Processing array.
ArrayList nodeY = new ArrayList(); // ArrayLists are nice to use because they're expandable, unlike a Processing array.

void mouseClicked() {
  nodeX.add(mouseX); // Adds the x-position of the mouse pointer to the nodeX list.
  nodeY.add(mouseY); // Adds the y-position of the mouse pointer to the nodeY list.
}

在 void draw() 中，设置一个 for 循环，在两个列表中的坐标处绘制圆圈:

stroke(0); // Set the circle's outline as black.
for(int i = 0; i < nodeX.size(); i++) {
  float xPos = (int)nodeX.get(i); // Grab the ith x-position from the list.
  float yPos = (int)nodeY.get(i); // Grab the ith y-position from the list.
  circle(xPos, yPos, 10);  // Draw a circle of diameter 10 at (xPos, yPos).
}

(注意，在 void draw() 的第一行我添加了

background(255); // Set the background color to white
stroke(125); // Set the stroke color as gray.

以便更容易看到圆圈)。

---

最后，我们需要用一条线连接每个圆圈。

stroke(0, 0, 255); // Make the connecting lines blue.
for(int i = 0; i < nodeX.size() - 1; i++) {
  float xPosA = (int)nodeX.get(i); // Grab the ith x-position from the list.
  float yPosA = (int)nodeY.get(i); // Grab the ith y-position from the list.
  float xPosB = (int)nodeX.get(i+1); // Grab the next x-position from the list.
  float yPosB = (int)nodeY.get(i+1); // Grab the next y-position from the list.
  line(xPosA, yPosA, xPosB, yPosB);
}
// And draw the connecting line.
if(nodeX.size() > 0) { // The code in this block will crash unless this condition is added to handle an empty list.
  int size = nodeX.size() - 1; // Get the index of the last item in nodeX/nodeY.
  float xPosA = (int)nodeX.get(0); // Grab the first x-position from the list.
  float yPosA = (int)nodeY.get(0); // Grab the first y-position from the list.
  float xPosB = (int)nodeX.get(size); // Grab the last x-position from the list.
  float yPosB = (int)nodeY.get(size); // Grab the last y-position from the list.
  line(xPosA, yPosA, xPosB, yPosB);
}