3

我正在用 Javascript 制作游戏引擎，我想要一个可以旋转的相机对象。当相机旋转时，整个 2D 场景也会围绕相机的位置旋转。每个视觉实体也可以旋转，它们是这样做的：

context.save(); //As we are about to change the context's state, we need to save it so it can be restored.

context.translate(entity.position.x + entity.width/2, entity.position.y + entity.height/2); //Translate to the center of the entity so the context can be rotated with the desired effect.
context.rotate(entity.rotation); //In radii.
context.drawImage(entitiy.image, -entity.width/2, -entity.height/2);

context.restore(); //Restore the previous context state so it can be used later by other entities.

我想以类似的方式实现相机旋转。基本上，在遍历所有实体并渲染它们之前，我会这样做：

if (camera.rotation != 0)
{
    renderer.context.save();
    renderer.context.rotate(camera.rotation);
}    

//Loop through entities and render.

然后，在实体完成后（并多次保存和恢复相同的上下文），我想将上下文恢复到渲染前的状态，如下所示：

if (camera.phi != 0)
{
    renderer.context.restore();
}

假设我有 2 个实体都旋转了一定程度，还有一个相机也旋转了，这个过程看起来像这样：

  1. 节省
  2. 节省
  3. 平移和旋转
  4. 从 2 恢复。
  5. 节省
  6. 平移和旋转
  7. 从5恢复。
  8. 从 1 恢复。

是否支持这种类型的行为？我实现了它，它似乎正在工作，虽然有错误，所以我无法正确评估情况......

4

1 回答 1

4

这应该是适当的行为。请记住在保存需要的画布功能的上下文后创建新的 beginPath() 调用，并在恢复之前在适当的时候关闭路径。

可能看这里：了解 save() 和 restore()

我在我的项目中使用嵌套的上下文保存和恢复。您只需要跟踪您在头脑中的堆栈中的位置即可。因此，如果您转换某些东西，那么当您开始操纵下一次保存等时，您将处于该转换状态。

于 2012-07-10T21:29:35.893 回答