CODEWITHSUNDEEP
javascriptcanvaskonvajs
Dimabytes
Dimabytes

Reputation: 536

Konva element outside of viewport

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

Upvotes: 0

Views: 1335

Answers (1)

Gustavo Morais
Gustavo Morais

Reputation: 588

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.

Upvotes: 1

Related Questions