search

konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.5k stars 920 forks source link

Implementing Drag Bound and Zoom Functionality in a Drawing Board #1816

Open jonas2024181 opened 1 month ago

jonas2024181 commented 1 month ago

I am currently developing a simple drawing board with the following stage properties: the position x, y set at (100, 100), and its width and height are 600, 600. I need assistance with implementing two features:

Drag Bound Function: I want to ensure that the drawing board remains within the viewport when dragged. The board should not be allowed to move outside of its defined boundaries.

Zoom Functionality: I need to implement zooming capability, which should allow users to zoom in and out on the drawing board, adjusting the view while maintaining the ability to drag the board within its bounds.

Could you provide guidance on how to implement these features effectively?

lavrton commented 1 month ago

Did you try anything?

Did you look here https://konvajs.org/docs/drag_and_drop/Complex_Drag_and_Drop.html and here https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html