search

saket / telephoto

Building blocks for designing media experiences in Compose UI
https://saket.github.io/telephoto/
Apache License 2.0
869 stars 28 forks source link

Support overlaying content that zooms with the image. #54

Closed evant closed 7 months ago

evant commented 7 months ago

I'm trying to overlay the image with an aspect ratio box and I'd like it to follow any zooms & translates the user makes. Unfortunately the accessed zoomFraction includes the initial scale of the image to scale to fit so I don't know what zoom factor to apply to my overlay to match. I think either of the below that would be sufficient:

  1. A user-zoom factor that goes from 1 when all the way 'zoomed out' to whatever the max zoom is.
  2. An initial image scale factor I could subtract from zoomFraction to get the value to scale my ui with.
ui screenshot
saket commented 7 months ago

A user-zoom factor that goes from 1 when all the way 'zoomed out' to whatever the max zoom is.

ZoomableState maintains this state internally but only exposes the final zoom factor. Will it be sufficient to expose these two values in some fashion?

https://github.com/saket/telephoto/blob/792274be28722b0e7f27af8153a8183f8e0241bf/zoomable/src/commonMain/kotlin/me/saket/telephoto/zoomable/ZoomableState.kt#L570-L582

I'd like it to follow any zooms & translates the user makes.

Do you have a video of an app that does this by any chance? I think I mostly understand your usecase but it'd be nice to confirm my assumptions by seeing something in action.

evant commented 7 months ago

Ah yep that should! Reading from userZoom is exactly what I'm looking for.

I think you can see a good example of what I'm looking to do by editing a photo and google photos and using the markup tool to mark on it.

saket commented 7 months ago

Got it. I'll try coming up something. 👍

I think you can see a good example of what I'm looking to do by editing a photo and google photos and using the markup tool to mark on it.

This screen?

Screenshot_20231110-005843

Or were you referring to this cropping tool? It has an overlay but it does not follow the image. It stays centered.

https://github.com/saket/telephoto/assets/2387680/fc994bdd-4e5c-4f20-9176-4353ef6e08a5

evant commented 7 months ago

The first one, note that when you draw on the image it tracks when you zoom/pan around.

saket commented 7 months ago

Gotcha!

saket commented 7 months ago

@evant Wanna try out 0.7.0-SNAPSHOT to see if you're able to use this?

https://github.com/saket/telephoto/blob/a586a8cffbff142c0329416ad80e14bea5e8912c/zoomable/src/commonMain/kotlin/me/saket/telephoto/zoomable/ZoomableContentTransformation.kt#L78-L90

saket commented 7 months ago

Released as part of 0.7.1.