0

ドラッグ可能な二次曲線をたくさん描く必要があるアプリを書いています。

これには Kinetic.Shape を使用しています (KineticJS 4.4.3)。

パフォーマンスが良くないので、コードの分析と最適化を試みたところ、drawFunc 関数が 2 回実行されていることがわかりました。添付のデモ コードを見てください。

var stage = new Kinetic.Stage({
    container: 'kinetic',
    width: 400,
    height: 300
});

var curveLayer = new Kinetic.Layer();

var line = new Kinetic.Shape({
    drawFunc: function (canvas) {
        console.log("drawFunc executed");
        var context = canvas.getContext();
        context.beginPath();
        context.moveTo(10, 10);
        context.quadraticCurveTo(95, 100, 200, 10);
        canvas.stroke(this);
    },
    strokeWidth: 10
});

curveLayer.add(line);
stage.add(curveLayer);

スクリプトを実行すると、コンソールに「drawFunc が実行されました」が 2 回表示されます。

理由がわかりません。何か良い方法はないかと自問自答しています。

フィドルへのリンク: http://jsfiddle.net/solitud/ZpU4J/9/

私のプロジェクトへのリンク: http://modulargrid.net/e/patches/view/92

4

1 に答える 1

0

KineticJS は常に、ドラッグなどに使用する非表示のバッファー キャンバスを作成します。

drawFunc がそのバッファー キャンバスに対して 1 回実行され、表示されているキャンバスに対して 1 回実行されていることがわかります。

その 2X 描画を排除する方法はありません。

あなたのプロジェクトのリンクを見ると、ユーザーがプラグを視覚的にドラッグすることで、さまざまな受容体への接続を作成していると思います。それをより効率的にする方法はありません。

ただし、接続が完了したら、コネクタをイメージにキャッシュすることで、コネクタの再描画を大幅に高速化できます。

画像キャッシュされた「コネクタ」を再描画すると、クワッド ベジエを再描画するよりもパフォーマンスの低下がはるかに少なくなります。

于 2013-05-07T21:56:17.330 に答える