如何將x-y位置轉換爲等角拼貼的x-y平鋪？

我可以根據公式Drawing Isometric game worlds來繪製我的地圖。但是如何根據地圖圖層div上的位置找到一個圖塊的x-y？如何將x-y位置轉換爲等角拼貼的x-y平鋪？

爲了清楚起見，我的瓷磚的左側樣式爲1036px，頂部樣式爲865px。根據這些css屬性，如何根據地圖找到瓦片的x和y位置？

瓷磚寬度是200，高度是100.

非常感謝。

我的JavaScript代碼是這樣的：

this.drawTiles = function(min_x, max_x, min_y, max_y) { 
    if (min_x < 0) min_x = 0; 
    if (min_y < 0) min_y = 0; 
    if (max_x < 0) max_x = thisObj.MAXSIZE; 
    if (max_y < 0) max_y = thisObj.MAXSIZE; 
    if (max_x > this.mapSize - 1) max_x = this.mapSize - 1; 
    if (max_y > this.mapSize - 1) max_y = this.mapSize - 1; 
    if (min_x < this.mapSize - 1) min_x = max_x - thisObj.MAXSIZE; 
    if (min_y < this.mapSize - 1) min_y = max_y - thisObj.MAXSIZE; 
    var appendLayer = thisObj.maplayer; 

    this.capMapDataObj.getTiles(min_x, max_x, min_y, max_y, function(JSONResp) { 
     var tiles = JSON.parse(JSONResp); 
     for (var x=min_x; x<max_x+1; x++) { 
      for (var y=min_y; y<max_y+1; y++) { 
       var tile = tiles[x][y]; 
       var xpos = (y * thisObj.tile_width/2) + (x * thisObj.tile_width/2); 
       var ypos = (x * thisObj.tile_height/2) - (y * thisObj.tile_height/2); 
       var zin1 = 100 + parseInt(x) + parseInt(y); 
       var elem = '<div style="position:absolute;top:'+ypos+'px;left:'+xpos+'px;z-index:'+zin1+';width:200px;height:200px;background-image:url(images/'+tile[4]+');background-position:bottom;background-repeat:no-repeat;bottom:0px;text-align:center;" id="'+x+'_'+y+'"><div style="padding-top:140px;">'+x+' - '+y+'</div></div>\n'; 
       if (document.getElementById(x+'_'+y) == undefined) 
        $(elem).appendTo(appendLayer); 
      } 
     } 
    }); 
}

所以XPOS和ypos變量各自磚層的CSS位置。當我點擊地圖圖層時，我想計算瓦片的等距x-y座標。

來源

2012-03-11 Osman

您能否提供更多關於您使用哪種算法的信息？關聯的問題提到了幾個。 – Appleman1234 2012-03-12 12:56:27

我已經解決了這個問題。

tileX = (yPos/tile_height) + (xPos/tile_width); 

tileY = (xPos/tile_width) - (yPos/tile_height);

來源

2012-03-12 21:08:34 Osman

如何將x-y位置轉換爲等角拼貼的x-y平鋪？

回答

相關問題