1

我正在制作一个 HTML5 游戏引擎，我希望我的Camera对象有一个zoom属性。在渲染器中，我认为我可以轻松实现它，如下所示：

context.save();
context.scale(camera.zoom, camera.zoom);
draw();
context.restore();

但是，有一个问题。当我第一次测试这个时，相机似乎永远变焦了！我认为这可能没有按预期工作，context.save()并且上下文的内部缩放因子正无限context.restore()地乘以相机的广告。zoom

这解决了这种情况：

context.save();
context.scale(camera.zoom, camera.zoom);
draw();
context.scale(1/camera.zoom, camera.zoom);
context.restore();

这现在有效，但恐怕这不是最优雅/最快速的解决方案。另外，我认为由于浮点计算的不精确性，比例因子可能总是略有变化。也就是说，1/camera.zoom可能并不总是产生相同的结果。

所以，两个问题：

  1. 为什么 context.restore() 不会将上下文的比例设置回 (1, 1)？
  2. 如何手动操作上下文的缩放？

编辑：

有人指出context.save()' 和context.restore()' 的数量可能不同，但事实并非如此。

这是我测量它的方法：

renderer.context.save = (function()
{
    var original = renderer.context.save;

    return function()
    {
        renderer.saved ++;
        original.call(renderer.context);
    }
})();

renderer.context.restore = (function()
{
    var original = renderer.context.restore;

    return function()
    {
        renderer.saved --;
        original.call(renderer.context);
    }
})();

该renderer.saved值1恰好在最后一次恢复上下文之前（绘制之后）和0每次渲染之后。

4

1 回答 1

2

好像我不小心解决了这个问题。现在可以了。

主要嫌疑人是这部分代码：

renderer.context.save();

//Erase everything.
renderer.context.globalAlpha = 1;
renderer.context.fillStyle = renderer.settings.fillStyle;
renderer.context.fillRect(0, 0, renderer.width, renderer.height);

//Zoom.
renderer.context.scale(camera.zoom, camera.zoom);

我相信我曾经在实际保存上下文之前进行缩放，导致恢复对缩放没有影响。

于 2012-08-09T15:02:52.153 回答