html - HTML5 画布 ScreenToIso

Question

我正在尝试在 HTML5 Canvas 中创建 Isometric，但不知道如何将 HTML5 Canvas 屏幕坐标转换为 Isometric 坐标。我现在的代码是：

    变种鼠标X = 0；
    变量鼠标Y = 0;
    功能鼠标检查（事件）{
        mouseX = event.pageX;
        mouseY = event.pageY;
    }

我得到了 Canvas 坐标。但是如何将此坐标转换为等轴测坐标？如果我喜欢使用 16x16 瓷砖。

感谢大家对这个问题的回复，并对我的英语感到抱歉。

score 0 · Accepted Answer

如果您想将标准坐标转换为等轴测坐标 - 您应该使用这样的公式（cos(30) = 0.866 & sin(30) = 0.5 是使用 30 度等轴测投影的因素）

xi = (y + x) * 0.866;
yi = (y - x) * 0.5;

因此，如果您想进行反向翻译 - 我们可以找到我们的公式：

y = yi + xi / (0.866 * 2);
x = y - 2 * yi;

EG 我们有坐标[3, 1]并且想找到等距坐标，所以很容易：

xi = (1 + 3) * 0.866 = 3.464;
yi = (1 - 3) * 0.5   = -1;

所以，这个单元格的视图坐标是 [3.464, -1]

EG 用户点击[5.2, 1]。计算新值很容易：

y = 1 + 5.2 / 1.732 = 4;
x = 4 - 2 * 1 = 2;

所以，点击卖出是[4, 2]

1 回答 1