鼠標座標到等距座標

我試圖通過鼠標位置在等距世界中獲得正確的瓷磚。鼠標座標到等距座標

我已經閱讀了一些關於此的帖子，但它似乎並不適用於我。基本的想法是重新計算正常的鼠標座標到等角磁貼座標。 Isometric Map

正如您所看到的，鼠標光標位於平鋪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個像素。

請幫助我 - 可能是我的整個公式是錯誤的。

來源

2014-05-01 Kosha Misa

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

應該是相當不言自明。

來源

2014-05-01 17:14:08

我是否正確？ ox/oy是我的鼠標座標，canvas是整個等軸測圖的包裝，screenOffset是畫布的偏移量，cols/rows是x和y方向上的圖塊數量，unitWidth/unitHeight是圖塊寬度/高度， w，h是畫布的寬度/高度？ –

Js沒有Math.constrain函數，因此它不起作用... –

'Math.constrain'是我的代碼中的一個自定義原型。邏輯足夠簡單：'Math.max（0，Math.min（this.cols - （w || 0），isoX））'。其他一切看起來正確 –

鼠標座標到等距座標

回答

相關問題