鼠标坐标到等轴坐标

Question

我正试图通过鼠标位置在等距世界中获得正确的图块。

我已经阅读了一些关于此的内容，但它似乎对我不起作用。 基本的想法是重新计算正常的鼠标坐标到等距瓷砖坐标。

正如您所看到的那样，鼠标光标位于图块5/4并且重新计算错误（选择的图块为4/5）。这是我的代码：

var params.tx = 100, params.ty=54,
PI = 3.14152,
x1 = x_mouse - params.tx*5,
y1 = y_mouse * -2,
xr = Math.cos(PI/4)*x1 - Math.sin(PI/4)*y1,
yr = Math.sin(PI/4)*x1 + Math.cos(PI/4)*y1,
diag = (params.ty) * Math.sqrt(2),
x2 = parseInt(xr / diag)+1, 
y2 = parseInt(yr * -1 / diag)+1;

瓷砖的原始高度为54px，但正如您所看到的，只有边框瓷砖显示其全高。其余的瓷砖切成4个像素。

请帮助我 - 可能是我的整个公式错了。

Answer 1

我在5年前编写的等距库中的代码：

screenPositionToIsoXY : function(o, w, h){
    var sX   = ((((o.x - this.canvas.xPosition) - this.screenOffsetX) / this.unitWidth ) * 2) >> 0,
        sY   = ((((o.y - this.canvas.yPosition) - this.screenOffsetY) / this.unitHeight) * 2) >> 0,
        isoX = ((sX + sY - this.cols) / 2) >> 0,
        isoY = (((-1 + this.cols) - (sX - sY)) / 2) >> 0;

    return $.extend(o, {
        isoX : Math.constrain(isoX, 0, this.cols - (w||0)),
        isoY : Math.constrain(isoY, 0, this.rows - (h||0))
    });
},

应该是相当不言自明的。