kineticjs - 画像を変更すると大きなラグが発生します

Question

サムネイル（キャンバスの背景を変更するミニ画像）をクリックした後、ページがラグを開始し、他のサムネイルをクリックするとラグが非常に大きくなり、変更後にテキストが表示されないという問題があります画像（これはこれらのラグに関連していると思います）誰かがどこに問題があるか教えてもらえますか、それとも私のコードを見て修復してみてください。

どこに問題があるのか​​ 本当にわからないので、ありがとうございます:(

http://codepen.io/anon/pen/ydxIH

Answer 1

http://codepen.io/anon/pen/bsdHp

ここでの主なエラーは、あなたがしていたことでした：

    layer.add(yoda);
    layer.add(vrchnyText);
    layer.add(spodnyText);
    stage.add(layer); 

写真をクリックするたびに。

画像とテキストを「変更」するのではなく、毎回「追加」していたため、これによりすべてが遅くなりました。したがって、毎回追加するのではなく、画像とテキストを変更してから、レイヤーを再度描画するだけです。

    vrchnyText.setText($(this).val().toUpperCase());
    layer.draw();

また、ステージと画像の幅と高さを毎回変更する必要はありません。これは常に 500 であるため、非常に遅くなります。