Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Have a look at this SO Question: <a href="https://stackoverflow.com/questions/17973947/how-to-cache-a-whole-layer-right-before-dragstart-and-revert-it-back-on-dragend/17997291#comment26545467_17997291">How to cache a whole layer right before dragstart and revert it back on dragend?</a></p> <p>The question and my answer describes a similar issue and I think the solution I came up with may help.</p> <p>Basically what I was suggesting (although I haven't tried it completely so I don't know if it will work well):</p> <ol> <li><strong>Cache the layer</strong> using <code>toImage</code></li> <li>Drag the image on a different layer while hiding the original layer.</li> <li>Calculate <strong>dx and dy</strong> (the distance that you moved)</li> <li>Update the original layer with <strong>dx and dy</strong></li> <li>Hide image layer, show shapes layer.</li> </ol> <p>I managed to create a quick example <a href="http://jsfiddle.net/projeqht/tPCGV/" rel="nofollow noreferrer">JSFIDDLE</a> to work with so check it out. One thing I noticed is that the <strong>stage size</strong> really affected the performance of the drag, even if it was just <strong>1 rectangle instead of 4000</strong>. 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</p> <p><strong>UPDATE</strong>:</p> <p>I found the reason for that "stretched/scaled" image when dragging. It's because I had the image size set statically like so:</p> <pre><code>var image = new Kinetic.Image({ image: img, x: 0, y: 0, width: 2000, height: 5000 }); </code></pre> <p>This caused the image to stretch since the image was larger than the stage. If we remove the width and height properties like so:</p> <pre><code>var image = new Kinetic.Image({ image: img, x: 0, y: 0 }); </code></pre> <p>You'll see that the image <strong>doesn't stretch anymore.</strong></p> <p>The other <strong>good news</strong> 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 <strong>performance has improved greatly</strong>. Hopefully your stage dimension isn't as large (2000x5000) as I had it before right? Check the <a href="http://jsfiddle.net/projeqht/tPCGV/" rel="nofollow noreferrer">JSFIDDLE</a> now and see it in action!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload