繪圖2D等距圖像網格

Question

我一直試圖在處理中表示一個2D圖像作爲等距網格，但我似乎無法獲得他們的位置權。

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

這是矩形左側之間的距離。換句話說，你正在使用這些來放置矩形。 當這大於矩形的大小時，矩形之間會有空間。而且由於你乘以（它是2），它將大於rectWidth。

換句話說，如果你讓你gap等於rectWidth，你沒有得到任何空格：

float gap = rectWidth; 

當然，這意味着你也許可以擺脫你gap的完全變量，但是如果你想將矩形間隔開以使邊界變粗或者其他東西，它可能會派上用場。