HTML5 Canvas ScreenToIso

Question

我尝试在HTML5画布中创建等距，但不知道如何将HTML5画布屏幕坐标转换为等距坐标。我现在的代码是:

<>之前var mouseX = 0;var mouseY = 0;函数mouseCheck(事件){mouseX = event.pageX;mouseY = event.pageY;}之前

我得到Canvas坐标。但是如何把这个坐标转换成等距坐标呢?如果我想使用16x16的贴图

感谢大家对这个问题的回复，很抱歉我的英语不好。

Answer 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;

因此，点击的sell是[4, 2]

通过LibCanvas的例子:http://libcanvas.github.com/games/isometric/