3

(重複していたら申し訳ありませんが、そうではないと思います)

ご存知のように、私は Google Chrome 29.0.1547.66 m を使用しています。

現在、40 x 100 タイルのタイル張りの「千鳥状」マップを構築するKineticJSプロジェクトが進行中です。マップのレンダリングには約 500 ミリ秒かかりますが、これは問題ありません。4000 個のタイルすべてが1 つのレイヤーに配置されました。

それが完了したら、ステージをドラッグしようとしますが、一度に 4000 個のタイルすべてを移動しようとするため、パフォーマンスが非常に低下します。160 ミリ秒の CPU 時間について話しています。

他の人が示唆したように、各行を個別のレイヤーに分割しようとしましたが、各レイヤーを個別に移動する必要があったため、さらに悪化しました ( 620 ミリ秒の CPU 時間)。

私は JavaScript が得意とは言えませんが、ドラッグのパフォーマンスを改善する方法がわかりません。

レイヤー全体をキャッシュ するか、何かが機能する可能性がありますか？

これまでのプロジェクトには非常に多くのコードが含まれているため、スニペットのみを示します。

//Stage Object
window.stage = new Kinetic.Stage({
    container: element,
    width: 800,
    height: 600,
    draggable: true
});

//Map Loop for create and position tiles
var tempLayer = map.addLayer(); //makes a new layer and adds it to stage etc.
for (var y = 0; y < height; y++) { //100 tiles high
    for (var x = width-1; x > -1; x--) { //40 tiles wide
        var tileImg = map._tiles[mapArray[x][y]-1]; //map._tiles is just an array of Kinetic.Image objects
        if (typeof(tileImg) != "undefined"){
            var tileClone = tileImg.clone();
            map.place(x, y, 0, tileClone, tempLayer); //places tile in world scope positions
        }
    }
}
tempLayer.draw();

パフォーマンスを改善する方法を見つけられない場合、誰もこれを実行できず、プロジェクトをビニングする必要があるため、すべての考えを歓迎します! ありがとう！

4

1 に答える 1

3

このSOの質問を見てください:ドラッグスタートの直前にレイヤー全体をキャッシュし、ドラッグエンドで元に戻す方法は?

質問と私の回答は同様の問題を説明しており、私が思いついた解決策が役立つと思います。

基本的に私が提案していたこと（ただし、完全に試していないため、うまく機能するかどうかはわかりません）：

  1. を使用してレイヤーをキャッシュしますtoImage
  2. 元のレイヤーを非表示にして、画像を別のレイヤーにドラッグします。
  3. dx と dy (移動した距離) を計算します。
  4. 元のレイヤーをdx と dyで更新する
  5. 画像レイヤーを非表示にし、シェイプ レイヤーを表示します。

作業するための簡単な例JSFIDDLEを作成できたので、確認してください。私が気づいたことの 1 つは、ステージ サイズが 4000 ではなく 1 つの四角形であっても、ドラッグのパフォーマンスに実際に影響することです。したがって、ステージが非常に大きい場合、このイメージ キャッシング機能を使用しても、あまり役に立ちませんでした。しかし、ステージサイズを小さくするとうまくいくようです

更新：

ドラッグ時にその「引き伸ばされた/スケーリングされた」画像の理由を見つけました。これは、画像サイズを次のように静的に設定したためです。

var image = new Kinetic.Image({
    image: img,
    x: 0,
    y: 0,
    width: 2000,
    height: 5000
});

これにより、画像がステージよりも大きいため、画像が引き伸ばされました。次のように幅と高さのプロパティを削除すると:

var image = new Kinetic.Image({
    image: img,
    x: 0,
    y: 0
});

画像が伸びていないことがわかります。

もう 1 つの良いニュースは、ステージのサイズを半分に縮小したことです (ただし、四角形の数、四角形が占める領域、および画像のサイズは同じままです) 。パフォーマンスは大幅に向上しました。うまくいけば、あなたのステージのサイズは以前ほど大きくない (2000x5000) ではないでしょうか? 今すぐJSFIDDLEをチェックして、動作を確認してください!

于 2013-09-13T15:02:32.873 に答える