javascript - 使用 HTML5 Canvas 进行真正的等距投影

Question

我是 HTML5 Canvas 和 JavaScript 的新手，但是有没有一种简单的方法可以在 HTML5 Canvas 元素中进行等距投影？

我的意思是真正的等距投影 - http://en.wikipedia.org/wiki/Isometric_projection

谢谢大家的回复。

Answer 1

首先，我建议将游戏世界想象成 X 乘 Y 的方形方 block 网格。这使得从碰撞检测、寻路甚至渲染的一切变得更加容易。

要在等距投影中渲染 map ，只需修改投影矩阵:

var ctx = canvas.getContext('2d');

function render(ctx) {
    var dx = 0, dy = 0;
    ctx.save();

    // change projection to isometric view
    ctx.translate(view.x, view.y);
    ctx.scale(1, 0.5);
    ctx.rotate(45 * Math.PI /180);

    for (var y = 0; i < 10; y++) {
        for (var x = 0; x < 10; x++) {
            ctx.strokeRect(dx, dy, 40, 40);
            dx += 40;
        }
        dx = 0;
        dy += 40;
    }

    ctx.restore(); // back to orthogonal projection

    // Now, figure out which tile is under the mouse cursor... :)
}

当您第一次使用它时会很兴奋，但您很快就会意识到它对于绘制实际的等距 map 并没有多大用处……您不能只是旋转您的图 block 图像并查看拐 Angular 处的情况。这些转换与其说是为了绘图，不如说是为了在屏幕空间和世界空间之间进行转换。

奖励:找出鼠标悬停在哪个图 block 上

您要做的是从“ View 坐标”( Canvas 原点的像素偏移量)转换为“世界坐标”(从图 block 0,0沿对 Angular 轴 的像素偏移量)。然后简单地将世界坐标除以瓦片宽度和高度就得到“ map 坐标”。

理论上，您需要做的就是通过上述投影矩阵的逆 投影“ View 位置”向量以获得“世界位置”。我说的是理论上，因为出于某种原因 Canvas 不提供返回当前投影矩阵的方法。有一个 setTransform() 方法，但没有 getTransform()，所以这是您必须滚动自己的 3x3 转换矩阵的地方。

实际上并没有那么难，在绘制对象时您将需要它在世界坐标和 View 坐标之间进行转换。

希望这对您有所帮助。