绘制二维等距图像网格

Question

我一直试图在 Processing 中将二维图像数组表示为等距网格，但我似乎无法正确放置它们。

尽管 x 点和 y 点似乎表明它们应该相邻放置（因为笛卡尔视图有效且等距转换方程似乎是正确的）。

我的意思是：

我想我可能错误地处理了我的平移和旋转，但经过数小时的谷歌搜索后我找不到如何处理。

可以看到我的这个实现的完整代码here。这是完整的处理代码，过于复杂，但可以在下面看到一个更简单的版本。

color grass = color(20, 255, 20);  //Grass tiles lay within wall tiles. These are usually images, but here they are colours for simplicity
color wall = color(150, 150, 150);

void setup() {
size(600, 600);
noLoop();
}

void draw() {
 int rectWidth = 30;
 float scale = 2;  //Used to grow the shapes larger
 float gap = rectWidth * scale;  //The gap between each "tile", to allow tile s to fit next to each other
 int rows = 4, cols = 4;  //How many rows and columns there are in the grid

 translate(300, 200);

 for (int row = 0; row < rows; row++) {
  for (int col = 0; col < cols; col++) {
    /* x and y calculations */
    float cartesianX = col * gap;  //The standard cartesian x and y points. These place the tiles next to each other on the cartesian plane
    float cartesianY = row * gap;

    float isometricX = (cartesianX - cartesianY);  //The isometric x and y points. The equations calculate it from the cartesian ones
    float isometricY = (cartesianX + cartesianY) / 2;

    /* transformations and placement */
    pushMatrix();  //Pushes the transform and rotate matrix onto a stack, allowing it to be reset after each loop

    translate(isometricX, isometricY);  //Translate to the point that the tile needs to be placed.
    scale(scale, scale / 2);  //Scale the tile, making it twice as wide as it is high
    rotate(radians(45));  //Rotate the tile into place

    //Work out what colour to set the box to
    if (row == 0 || col == 0 || row == rows -1 || col == cols - 1)  fill(wall);
    else fill(grass);

    rect(0, 0, rectWidth, rectWidth);

    popMatrix();
  }
}
}

Answer 1

让我们仔细看看您是如何使用两个值的：

int rectWidth = 30;

这是矩形的大小。有道理。

float gap = rectWidth * scale;

这是矩形左侧之间的距离。换句话说，您正在使用这些来放置矩形。 当这大于矩形的大小时，矩形之间将有 space。 而且由于您将 rectWidth 乘以 scale（即 2），它将大于 rectWidth。

换句话说，如果你让你的 gap 等于 rectWidth，你不会得到任何 spaces:

float gap = rectWidth;

当然，这意味着你可以完全摆脱你的 gap 变量，但如果你想 space 使矩形的边框变粗或其他东西，它可能会派上用场.

绘制二维等距图像网格

Drawing 2d isometric image grid

multidimensional-array

processing

isometric