Kineticjs - Moving 4000 Tiles With Stage.draggable

(Sorry if this is a duplicate, but I don't think it is) Just so you know, I'm using Google Chrome 29.0.1547.66 m. I have a KineticJS Project going on at the moment which builds a t

Solution 1:

Have a look at this SO Question: How to cache a whole layer right before dragstart and revert it back on 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. 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.

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

UPDATE:

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

varimage=newKinetic.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:

varimage=newKinetic.Image({image:img,x:0,y:0});

You'll see that the image doesn't stretch anymore.

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!