usuiat / Zoomable

Jetpack Compose library that enables contents zooming with pinch gesture.
https://usuiat.github.io/Zoomable/
Apache License 2.0
325 stars 15 forks source link

How to zoom at the center of the image programmatically #203

Closed hellosagar closed 1 month ago

hellosagar commented 3 months ago

I've take a look at this PR. According to this I can use

zoomState.changeScale(
     zoomstate.scale * 2,
     Offset(X,Y),
)

Where X and Y would be if I understood it correctly. @usuiat Is the formula looks correct to you?

X = (w∗scale−w)/2
Y = (h∗scale−h)/2

Currently cant access the layout size from the zoomState. How can I achieve this?

hellosagar commented 3 months ago

Currently, on passing the same offset, it behaves like the following.

zoomState.changeScale(
                zoomState.scale + 1,
                Offset(zoomState.offsetX, zoomState.offsetY),
              )

Removed the media

@usuiat I would appreciate your response. Thanks!

usuiat commented 3 months ago

@hellosagar One possible way to achieve this is Modifier.onSizeChanged. You can get the size of image like below.

var size = remember { Size.Unspecified }
Image(
    ...
    modifier = Modifier
        .onSizeChanged { size = it.toSize() }
        .zoomable( ... )
)

Then you can pass size.center to ZoomState.changeScale.

zoomState.changeScale(
    targetScale = 2f,
    position = size.center
)

By the way, I am wondering if I should make ZoomState.layoutSize public. Because it is not available at the time ZoomState is created.

hellosagar commented 3 months ago

Thanks that helped! It would be nice to make the zoomState.layoutSize as it's already available inside the zoomState, eliminating the need to keep a separate state of the size.