绘制二维等距图像网格

Question

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

即使 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;

这是矩形左侧之间的距离。换句话说，您正在使用这些来放置矩形。 当它大于矩形的大小时，矩形之间就会有空间。 因为你将rectWidth 乘以scale（即2），所以它会大于rectWidth。

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

float gap = rectWidth;

当然，这意味着您可以完全摆脱 gap 变量，但如果您想将矩形隔开以使其边框更粗或其他什么，它可能会派上用场。