绘图2D等距图像网格

我一直试图在处理中表示一个2D图像作为等距网格，但我似乎无法获得他们的位置权。绘图2D等距图像网格

即使x和y点似乎表明它们应该是（如笛卡尔视图起作用并且等距转换方程式似乎如此），图像不会彼此相邻放置（如同瓷砖不接触）是正确的）。

这里是我的意思是：

Isometric grid

我想我可能是错的治疗我的平移和旋转，但谷歌上搜索我怎么也找不到了几个小时之后。

我的这个实现的完整代码可以看到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(); 
    } 
} 
}

来源

2016-09-14 Alex Hockley

让我们来看看您如何使用这两个值接近：

int rectWidth = 30;

这是矩形的大小。说得通。

float gap = rectWidth * scale;

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

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

float gap = rectWidth;

isometric grid without gaps

当然，这意味着你也许可以摆脱你gap的完全变量，但是如果你想将矩形间隔开以使边界变粗或者其他东西，它可能会派上用场。

来源

2016-09-14 13:16:29

您的修补程序确实会将瓷砖贴在一起，但我注意到它们现在重叠而不是未触及。我认为对于正确的等轴测视图，它们必须直接相邻并且不重叠。这里是我的意思的一个例子： [Isometric Overlap]（http://i.imgur.com/ULA21Kx.png）。有没有解决这个问题？此外，是否有任何方法可以制作代码，以便我可以更改比例尺并让瓷砖一起移动，以便我可以试验我想要的样子？另外，我只是想非常感谢你编辑我的帖子，这是非常感谢:) –

@AlexHockley没问题。如果'gap = rectWidth'太靠近了，你可以尝试添加一个缓冲区：'gap = rectWidth + 12'似乎工作得很好。不知道这个幻数是从哪里来的，但我从来没有见过以这种方式完成的等距视图。不是说你做错了！至于规模，我猜你需要将你的魔术数字放在规模之外。也许'12 * scale'将是第一个愚蠢的尝试。如果您有更多问题，我很乐意提供帮助，但如果您将它们作为新问题发布，可能会更容易，因为Stack Overflow评论（故意）是可怕的。 –

即使它比我计划的更手动一点，该修复工作得很好。非常感谢您，如果我再次陷入困境，我会按照您的建议发布新问题。 –

绘图2D等距图像网格

回答

相关问题