KineticJS Stage可拖動的性能

Question

下午好。 我在優化KineticJS和階段時遇到了一個小問題。 在我的計算機上拖動場景時，它運行平穩。 當嘗試使用更低端的機器時，它會慢慢出現並呈現出一些幻燈片播放之王。 這里是初始化動力學的代碼：

this.stage = new Kinetic.Stage({
    container: WF_Config.gameWindowId,
    width: $(stageContainerDOM).width(),
    height: $(stageContainerDOM).height(),
    draggable: true,
    //TODO: test on other browsers. I really not understand what it's doing :)
    dragOnTop: false,
    scale: {
        x: 1,
        y: 1
    }
});
this.layers = {
    //Listen for events only for ground cells
    ground: new Kinetic.Layer(),
    grid: new Kinetic.Layer({
        listening: false
    }),
    buildings: new Kinetic.Layer({
        listening: false
    }),
    tooltip: new Kinetic.Layer({
        listening: false
    })
};

我如何才能提高其性能？ 這里測試現場 。 單擊創建游戲，並在名稱和密碼中寫入一些字符串，並在玩家數量中寫入一些整數。 你看到了。 PS感謝您的幫助，對不起我的英語不好。

Answer 1

看一下緩存。 您可以在拖放之前緩存整個舞台。 這會將整個舞台臨時轉換為圖像。 這是有關緩存的內容：

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