HTML5 画布 ScreenToIso

【问题标题】：HTML5 Canvas ScreenToIsoHTML5 画布 ScreenToIso
【发布时间】：2023-03-17 03:55:01
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

如果您想将标准坐标转换为等轴测坐标 - 您应该使用这样的公式（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;

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

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

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

E.G 用户点击了[5.2, 1]。计算新值很容易：

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

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

【讨论】：