Konva element outside of viewport

Question

I need to move my viewport, if user drag element outside of it. offsetX and offsetY is not help here. How to solve this? I try to do it in many ways, but dont have any working examples.

Simple example: When i drag red rect out from view (to the top left corner for example) I want my view moved with it.

codepen.io/dimabytes/pen/WNNORyZ

Could you clarify your question. Maybe add a diagram or image ? — Vanquished Wombat

Gustavo Morais Gustavo Morais · Accepted Answer · 2019-10-28T01:18:56

You have to move your layer coordinates when your pointer goes outside of the screen. Supposing that you have a layer within a bigger stage.

To know how to manipulate your layer coordinates better, this is somewhat useful: https://konvajs.org/docs/sandbox/Canvas_Scrolling.html

To get your pointer position you need something like:

node.on('onDragMove', (e) => {
   stageRef.getPointerPosition().x // That's your x position
   stageRef.getPointerPosition().y // That's your y position
});

With these both directions you should be able to find a solution to your problem.

Konva element outside of viewport

1 Answers