如何将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平铺？

回答

相关问题