Question

（对不起，如果这是重复的，但我认为不是）

您知道，我使用的是Google Chrome 29.0.1547.66 m。

我现在正在进行 KineticJS 项目，该项目将构建一个平铺的“交错”地图40 x 100平铺。地图需要大约500毫秒来渲染，这很好。所有 4000个图块都已放到一个图层上。

一旦完成，我会尝试拖动舞台，但是我正在尝试非常差的性能，因为它试图同时移动所有 4000个瓷砖。我们谈论的是 160ms的CPU时间。

我已经尝试将每一行分成自己的单独的图层作为others suggested，但这使得它更糟糕（ 620ms CPU时间）分别移动每一层。

我不会说我非常擅长JavaScript，但我看不到提高拖拽性能的方法，而且我做了一些下降研究。

也许caching 整个图层或其他什么方法可以使用？

到目前为止，该项目有很多代码，所以我只是要展示片段：

//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();

如果我无法弄清楚如何提高性能，那么任何人都无法运行此项目并且该项目必须 binned ，所以所有想法都表示赞赏！谢谢！

Answer 1

看看这个SO问题：How to cache a whole layer right before dragstart and revert it back on dragend?

问题和我的回答描述了一个类似的问题，我认为我提出的解决方案可能有所帮助。

基本上我的建议是什么（虽然我没有完全尝试过，所以我不知道它是否会运作良好）：

使用toImage

缓存图层

在隐藏原始图层的同时将图像拖到另一个图层上。
计算 dx和dy （您移动的距离）
使用 dx和dy
隐藏图片图层，显示形状图层。

我设法创建了一个快速示例JSFIDDLE，所以请查看它。我注意到的一件事是舞台大小确实影响了拖动的性能，即使它只是 1个矩形而不是4000个。所以，如果舞台真的很大，即使有这个图像缓存的东西，它也没有真正帮助。但是当我减小舞台大小时，它似乎有所帮助

<强>更新：

我在拖动时找到了“拉伸/缩放”图像的原因。这是因为我的图像大小设置如此静态：

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
});

您会看到图片不再延伸。

另一个好消息是我将舞台尺寸缩小了一半（尽管矩形的数量，矩形占据的面积和图像的大小保持不变）并且性能得到了提升大大即可。希望你的舞台尺寸不像以前那么大（2000x5000）吗？立即查看JSFIDDLE并查看其中的操作！

KineticJS - 使用Stage.draggable移动4000个瓷砖

1 个答案: