我如何转换坐标位置瓷砖XY等距瓷砖？ [英] How can i convert x-y position to tile x-y for isometric tile?

问题描述

我公司可根据有关图形等距游戏世界的画我的地图。但是，我怎么能找到根据一个区块的XY到它在图层DIV位置？

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?

有关是明确的，我瓷砖的左侧风格是1036px和最高的风格是865px。根据这些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 code是这样的：

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

所以XPOS和ypos变量是每个图块层的CSS的位置。当我点击地图图层，我想计算出瓷砖的等距XY坐标。

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.

推荐答案

我已经解决了这个问题。

I've solved the problem.

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

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

这篇关于我如何转换坐标位置瓷砖XY等距瓷砖？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！