Question

我正在制作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可能并不总能产生相同的结果。

所以，有两个问题：

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

有人指出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。

Answer 1

好像我不小心解决了这个问题。它现在有效。

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

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

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

为什么不将context.restore（）设置上下文的比例回到（1,1）？

1 个答案: