鼠標坐標到等距坐標

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))
    });
},

應該是不言自明的。