Konva zoom fill to content on the stage

Question

Hi I'm very lost on how to accomplish this. I'm basically trying to zoom into some content when it is added to the stage.

I have one stage and one layer. Some shapes are added to the layer, let's say some Lines are added with some predefined points (array of X and Y coordinates). When this shapes are added, I want to change the X,Y and scale of the stage so that the new shapes are centered and fit nicely in the screen. Without resizing or changing at all the shapes.

When the shapes are added, they can be totally out of view with a random size, very small or big. So I want to zoom in or out to fill or fit the view for the user with this content.

I don't know if there is anything specific to Konva about this really. I hope someone can point me in the right direction, thanks.

Answer 1

What you need to know is that layer.getClientRect() will give you a rect surrounding the stage content. From this you can compute the best scale to apply to get the content scaled to fit the window, and the position to apply to the layer to put the scaled content in the centre of the layer.