1

CameraHTML5 ゲーム エンジンを作成しており、オブジェクトにプロパティを持たせたいと考えてい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常に同じ結果が得られるとは限りません。

だから、2つの質問：

  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 に答える