KineticJS Stage 可拖动性能答案

【问题标题】：KineticJS Stage draggable perfomanceKineticJS Stage 可拖动性能
【发布时间】：2013-05-19 11:18:21
【问题描述】：

下午好。我对优化 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
    })
};

如何提高性能？这里test site。单击创建游戏并写入名称和密码一些字符串和一些整数的玩家计数。你看到了这个。附：感谢您的帮助，并为我的英语不好感到抱歉。

【问题讨论】：

你能在这里提供一个代码 sn-p 你的问题吗？我试着打开你的游戏。在打开的“请稍等”屏幕上等待 1 分钟后，我放弃了。顺便说一句，画布在移动设备上的运行速度要慢得多，因此您希望进行优化是个好主意。
我注意到 jQuery 2.0 与 Opera 存在问题。我也无法在 Opera 中打开游戏。在其他浏览器中它工作正常。就是这个问题，不知道哪部分代码可以优化。我只是在 Kinetic.Stage 中设置了可拖动的。和问题“如何优化这个默认的可拖动属性？”。谢谢。附：这里Scene.js实现了游戏中的所有绘图。
一件事：在画布上缩放会消耗性能。你能避免缩放吗？
也许是另一件事：与其用单个单元格图像组成背景，不如创建一个静态背景（它可能比您的视口大），然后在视口中滚动静态背景。
如果我理解正确，我将如何检测点击单元格并检测点击单元格的 id？我的背景是不同的图像，在“on”方法中工作。还有一件事情。如果我尝试将形状缓存到图像，则缓存仅在视口上起作用，而不是在所有舞台上。

标签： javascript performance kineticjs

【解决方案1】：

看看缓存。您可以在拖放之前缓存整个舞台。这会暂时将整个舞台转换为图像。下面是关于缓存的小知识：

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

【讨论】：

我会试试的。但是，如果我尝试在拖动之前将形状转换为图像，然后在不缓存的情况下再次绘制形状......我认为它会非常缓慢。
我实现了缓存，它对我来说很好用。但是我现在如何检测细胞呢？