我如何将 x-y 位置转换为等距平铺的平铺 x-y? [英] How can i convert x-y position to tile x-y for isometric tile?

问题描述

我可以根据绘制等距游戏世界上的公式绘制我的地图.但是如何根据它在地图层 div 上的位置找到一个图块的 x-y?

I can draw my map according to the formula on Drawing Isometric game worlds . But how can i find the x-y of one tile according to it's position on map layer div?

为了清楚起见，我的磁贴的左侧样式为 1036 像素，顶部样式为 865 像素.根据这些css属性如何根据地图找到tile的x和y位置?

For being clear, my tile's left style is 1036px and top style is 865px. According to those css properties how can find the tile's x and y position according to map?

平铺宽度为 200，高度为 100.

Tile width is 200 and height is 100.

非常感谢.

我的javascript代码是这样的:

My javascript code is like that:

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>
';
                if (document.getElementById(x+'_'+y) == undefined)
                    $(elem).appendTo(appendLayer);
            }
        }
    });
}

所以 xpos 和 ypos 变量是每个 tile 层的 css 位置.当我点击地图层时，我想计算图块的等距 x-y 坐标.

So xpos and ypos variables are the css positions of each tile layer. When i click the Map Layer, I wanted to calculate the tile's isometric x-y coordinates.

推荐答案

我已经解决了问题.

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

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

这篇关于我如何将 x-y 位置转换为等距平铺的平铺 x-y?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！