0

KineticJSを使用していて、集中的な描画のパフォーマンスを得るために多くの小さなレイヤーを使用したいのですが、個々のレイヤーサイズを設定しても、それぞれのキャンバスサイズが調整されないことがわかりました（ファイアバグを使用）。作成されたすべてのキャンバスにステージがあります。寸法！

これは、小さなステージ（少なくともレイヤーが多すぎない場合）では問題になりませんが、大きなステージと100近くのレイヤーでは、パフォーマンスの問題はありませんか？

言い換えれば、これは必要な機能ですか、それともバグですか？

簡単なテストコードは次のとおりです。

var stage = new Kinetic.Stage({
    container: 'main',
    width: 400,
    height: 400,
});
for (var i=0; i<5; i++) {
    var layer = new Kinetic.Layer({
        x:i*30+10,
        y:i*30+10,
        width:20,
        height:20,
    });
    layer.add( new Kinetic.Rect({
        width: 20,
        height: 20,
        fill: 'red',
    }));
    stage.add(layer);

    // trying to force layer dimensions
    layer.setWidth(20);
    layer.setHeight(20);
}
stage.draw();

そして、ここで、DOMを見たときに私が見るもの：

<div id="main">
    <div style="position: relative; display: inline-block; width: 400px; height: 400px;" class="kineticjs-content">
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
    </div>
</div>
4

1 に答える 1

2

はい、レイヤーのキャンバスのサイズを制御することはできません

そして、はい、あなたは何百ものレイヤー（=何百ものフルサイズのキャンバス）で大きなパフォーマンスヒットを得るでしょう。

幅/高さを低く設定した場合でも、レイヤーは常にステージと同じサイズになります。幅/高さのプロパティはKinetic.Nodeから継承されており、効果がないように見えます。

また、固定幅のレイヤーを使用すると、シェイプをそのレイヤーから「ブリード」することができます（シェイプはそのレイヤーにクリップされません）。

したがって、適度に作成されたレイヤーは、次の場合に最適です。

  • 同様の再描画スケジュールを必要とするオブジェクトのレイヤリング、
  • z-indexing、
  • パフォーマンス上の利点を再描画します。

KineticJSの作成者であるEricRowellは、このストレステストを行いました：http ：//www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

そして彼はこれを言います：

それぞれ1000個の形状を含む10個のレイヤーを作成して、10,000個の形状を作成します。これにより、10,000個のシェイプすべてではなく、レイヤーから円を削除するときに一度に1,000個のシェイプを描画するだけで済むため、パフォーマンスが大幅に向上します。レイヤーが多すぎると、パフォーマンスが低下する可能性があることに注意してください。それぞれ1,000個の形状で構成される10層を使用すると、500個の形状の20層、または2,000個の形状の5層よりもパフォーマンスが向上することがわかりました。

于 2013-03-10T17:20:54.280 に答える