kineticjs - kineticjs を使用してキャンバス内でグループをドラッグする

Question

html5 Canvas に基づくアプリケーションがあります。ドラッグアンドドロップにkineticjsライブラリを使用しました。ドラッグアンドドロップ用の複数のグループがあります。キャンバスのサイズを大きくすると、ドラッグにラグが生じます。ドラグのパフォーマンスを向上させるにはどうすればよいでしょうか。iPad やタブレット端末で簡単に認識できます。サンプルを作成しました。jsfiddle.net/MRVCg/5/embedded/result/

Answer 1

妥当な質問だと思いますが、

http://www.html5canvastutorials.com/kineticjs/html5-canvas-shape-caching-with-kineticjs/

パフォーマンスを向上させるために、シェイプをイメージとしてキャッシュしてみてください。あなたはそうすることができます：

shape.toImage({
  // define the size of the new image object
  width: 100,
  height: 100,
  callback: function(img) {
    // cache the image as a Kinetic.Image shape
    var image = new Kinetic.Image({
      image: img
    };
  }
});