Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/434.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 鼠标坐标到等轴测坐标_Javascript_Coordinates_Isometric - Fatal编程技术网

Javascript 鼠标坐标到等轴测坐标

Javascript 鼠标坐标到等轴测坐标,javascript,coordinates,isometric,Javascript,Coordinates,Isometric,我试图通过鼠标位置在等距世界中获得正确的瓷砖 我读过一些关于这方面的广告,但似乎对我不起作用。 其基本思想是将正常鼠标坐标重新计算为等轴测平铺坐标 如您所见,鼠标光标位于磁贴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/

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

我读过一些关于这方面的广告,但似乎对我不起作用。 其基本思想是将正常鼠标坐标重新计算为等轴测平铺坐标

如您所见,鼠标光标位于磁贴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个像素


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

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

应该是不言自明的。

我说得对吗?o、 x/o.y是我的鼠标坐标,canvas是我对整个等轴测地图的包装,screenOffset是画布的偏移,cols/rows是x和y方向上的瓷砖数量,unitWidth/unitHeight是瓷砖的宽度/高度,w,h是画布的宽度/高度?
Math。Constraint
是我代码中的自定义原型。逻辑非常简单:
Math.max(0,Math.min(this.cols-(w | | 0),isoX))
。其他的一切看起来都是对的,也许我做错了什么,但似乎不起作用。我在这里举了一个例子:在第49行,你会找到你的函数和我的变量。你能看一下吗?谢谢…看起来它在工作,只是索引关闭了。X和Y线都要减去X,所以要修正这个问题。如果仍处于关闭状态,请尝试交换它们(您可能与我的方向不同)。可能有一个提示:如果我将此转换应用于画布:旋转(-45度)scaleX(0.5)translateY(-239px)translateX(-274px),则我会看到以下内容:。。。对应的变换矩阵是:矩阵(0.3535533905932742,-0.35355339059327334,0.7071067811865467,0.7071067811865483,-266,-72)-我应该能够计算点的位置,我已经尝试过了,但它不起作用:(-我的瓷砖没有正确定位吗?