KineticJS - 使用Stage.draggable移动4000个瓷砖 [英] KineticJS - Moving 4000 tiles with Stage.draggable

问题描述

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

就这样你知道，我是使用谷歌浏览器29.0.1547.66米。

Just so you know, I'm using Google Chrome 29.0.1547.66 m.

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

I have a KineticJS Project going on at the moment which builds a tiled "staggered" map 40 x 100 tiles. The map takes about 500ms to render which is fine. All 4000 tiles have been put onto one layer.

一旦完成，我会尝试拖动舞台，但是我的非常差的性能因为它试图移动所有 4000平铺瓦片。我们谈论的是 160毫秒的CPU时间。

Once that has completed, I try to drag the stage but I am getting very poor performance as it tries to move all 4000 tiles at once. We are talking about 160ms of CPU time.

我尝试将每一行分成自己的单独的图层如其他建议，但这更糟糕（ 620ms CPU时间）因为它必须分别移动每一层。

I have tried breaking each row up into its own separate layer as others suggested, but that made it even worse (620ms CPU time) as it had to move each layer separately.

我不会说我非常擅长JavaScript但是我看不到提高性能的方法我已经做了一些下降研究。

I wouldn't say I'm very good at JavaScript but I can't see a way to improve the performance of the drag and I have done some descent research.

也许 缓存 整个图层或其他什么方式可以使用？

Maybe caching the entire layer or something could work?

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

The project so far has quite a lot of code, so I'm just going to show snippets:

//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 ，所以所有的想法都值得赞赏！谢谢！

If I can't work out how to improve the performance, there is no way anyone will be able to run this and the project is going to have to be binned, so all thoughts are appreciated! Thanks!

推荐答案

看看这个SO问题：如何在dragstart之前缓存整个图层并将其还原关于dragend？

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

The question and my answer describes a similar issue and I think the solution I came up with may help.

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

Basically what I was suggesting (although I haven't tried it completely so I don't know if it will work well):

1. 使用缓存图层 toImage


2. 将图片拖到其他图层上隐藏原始图层。


3. 计算 dx和dy （移动的距离）


4. 更新原始图层 dx和dy


5. 隐藏图片图层，显示形状图层。

1. Cache the layer using toImage
2. Drag the image on a different layer while hiding the original layer.
3. Calculate dx and dy (the distance that you moved)
4. Update the original layer with dx and dy
5. Hide image layer, show shapes layer.

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

I managed to create a quick example JSFIDDLE to work with so check it out. One thing I noticed is that the stage size really affected the performance of the drag, even if it was just 1 rectangle instead of 4000. So, if the stage is really big, even with this image caching thing it didn't really help. But when I decrease the stage size it seems to help

更新：

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

I found the reason for that "stretched/scaled" image when dragging. It's because I had the image size set statically like so:

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

由于图像大于舞台，因此导致图像拉伸。如果我们删除宽度和高度属性，如下所示：

This caused the image to stretch since the image was larger than the stage. If we remove the width and height properties like so:

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

您会看到图片不再延伸。

另一个好消息是我将舞台尺寸缩小了一半（尽管矩形的数量，矩形占据的面积和图像的大小仍然存在同样的）性能大大提高。希望你的舞台尺寸不像以前那么大（2000x5000）吗？立即查看 JSFIDDLE 并查看其实际效果！

The other good news is that I reduced the stage dimensions by half (although the number of rectangles, area taken by rectangles and size of image remains the same) and the performance has improved greatly. Hopefully your stage dimension isn't as large (2000x5000) as I had it before right? Check the JSFIDDLE now and see it in action!

这篇关于KineticJS - 使用Stage.draggable移动4000个瓷砖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！