How to implement Zoom in/out using JavaFX?

Question

For my university project, I have to implement a simple GUI programme where I have to build shapes like (rectangle, square, circle etc) and do some basic operations on them ( group, move etc).

I have two layout Architecture, as shown in the image attached, where the left one will display the shapes created. However, how can I make this zoomable?

For example, if a user creates a rectangle that's too big , in order to fit in the current dimensions, my programme needs to be able to zoom out to view it properly. But my right layout will stay fixed as is.

Any idea on what exactly from JavaFX I'd need to implement this?

Answer 1

This is actually quite simple if you use the scene graph. Make the left part a Pane. Add a Group node at its root and then add all your shapes to that Group node. You can then pan and zoom by just applying a single transform to this Group node.