Search code examples
konvajskonva

Is there a way to control more specifically the drag event of konva objects?


For example, by setting stage.draggable(true) we can make a stage draggable.

By default, it is a continuous motion, meaning that every time when the mouse exerts dragging on a stage, the drag event is invoked. This causes lagging in my application, probably because of the large amounts of shapes that need to be redrawn after each drag event.

So, is there a way to control the timing of invoking drag event? Or maybe can I set a small time gap between each drag event?


Solution

  • No, in Konva you can't control timing of invoking drag event.

    Konva is updating positions and firing dragmove event on every mousemove/touchmove event.

    But it doesn't draw immediately. It draws as soon as possible with requestAnimationFrame.

    If you want to have full control over dragging you can implement it manually. Like (1) listen to mousedown/touchstart event, (2) move node on mousemove/touchmove and (3) stop dragging on mouseup/touchend.

    In the best case, you need to find ways to optimizing drawing. Usually caching improve performance of drawing a lot. You can cache on dragstart and clear cache on dragend.

    For more performance tips take a look here: https://konvajs.org/docs/performance/All_Performance_Tips.html