0

kineticJS を使用して、頻繁にプレイするコンピューター ゲーム (X3AP、fwiw) のマップを作成しています。

マップは一連の動的画像オブジェクトとして XML から構築されています。私の最初のプロトタイプ ビルドでは、セクターのさまざまな画像をユニバース レイヤーに直接追加しました (つまり、左、右、上下の各リンクのブラック ボックス、セクター自体の四角形、名前のテキスト、注目のステーションが含まれているかどうかのキネティック イメージ)。すべてのセクターがレイヤーに描画され (ステージよりもはるかに大きなレイヤーになります)、そのレイヤーがステージに描画されます。

そのレイヤーにドラッグを実装すると、ドラッグが遅くなります。

私の最初の考えは、これらのものを宇宙マップを表すレイヤーに直接追加する代わりに、それらすべてをローカル変数レイヤーに追加し、そのレイヤーの toImage を使用し、処理関数で結果の画像をマップに使用するレイヤーに追加することでした. 画像が空白になっていた (Firefox の firebug で確認)。

これは、ローカルレイヤーをステージに描画したことがないことに起因する可能性があると考えたので、イメージするものは何もないので、レイヤー全体をそのまま描画し、その上でtoImage を実行してみましたが、今回は小さくなりました私が期待していたよりも画像です（このhttp://jsfiddle.net/3tUj7/5/に似たもの）。

マップ レイヤーのクローンを作成し、そのプロパティを実際のサイズに設定した 2 番目のキャンバス オブジェクトに追加して、画像全体を取得します。これは適切な方法ですか？

var layer;
$(
    function()
    {
        var stage = new Kinetic.Stage({
            width:100,
            height:100,
            container:'canvas'
        });
        layer = new Kinetic.Layer({
            width:200,
            height:200,
            draggable:true
        });
        stage.add(layer);

        layer.add(
            new Kinetic.Rect({
                fill:'black',
                x:0,
                y:0,
                width:200,
                height:200
            })
        );

        for(var i = 0; i < 100; i++)
        {
            var x = parseInt(Math.random()*190);
            var y = parseInt(Math.random()*190);
            layer.add(
                new Kinetic.Rect({
                    x:x,
                    y:y,
                    width:10,
                    height:10,
                    fill:'red',
                    stroke:'black',
                    strokeWidth:1
                })
            );
        }
        layer.draw();
        // only returns the image of the *shown* part of the layer
        layer.toImage({
            callback:function(img)
            {
                $('#canvasImg').attr('src', img.src);
            }
        });
    }
);
4

1 に答える 1

1

最終的にレイヤーではなくグループを使用し、グループを位置 0,0、幅と高さ 110 に追加しました。タイルを配置するために必要な場所に配置されたかのように、すべてのアイテムがそのグループに追加されました。正しい場所 (つまり、0 から約 110 の間)。

toImage はそのグループで期待どおりに機能し、レイヤーのサイズの画像の生成を回避できました。

于 2012-12-17T05:10:52.357 に答える