0

Kinetic.js を使用して形状を作成し、マウスの移動に合わせて拡大縮小するアプリケーションを作成することは可能ですか? Kinetic API には何も見つからなかったので、「生の」JQuery を混ぜています。特に$("canvas").last().mousemove関数を使用していますが、これは実際には非常に遅いことがわかりました。

これがJSFiddleです。

速くするためのヒントはありますか？

layer.on("mousemove", fn)Kinetic.js は形状にのみ適用されるように見えるため、Kinetic.js が をサポートしているとは思いません。

4

1 に答える 1

0

はい。次のようにします。

$('#container').on('mousemove', function(evt) {
  shape.setScale(someValue);
  layer.batchDraw();
});

つまり、コンテナの div 要素 (Kinetic ステージに渡す要素) に mousemove リスナーをアタッチします。setScale() メソッドでシェイプ スケールを設定します。draw() の代わりに batchDraw() を使用して、描画操作が KineticJS アニメーション エンジンにフックされ、パフォーマンスが大幅に向上します。それ以外の場合、draw() を使用すると、mousemove イベントが検出されるたびにレイヤー全体が再描画されます。ブラウザーによっては、1 秒あたり数十万回になる可能性があります。

于 2013-06-10T01:47:28.097 に答える