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

Individual Zoom for Canvas Rectangles using rememberZoomState. #85

Closed CharlesMoreira1 closed 1 month ago

CharlesMoreira1 commented 1 month ago

Hi!

I'm trying to add zoom to the rectangles I drew with canvas, using rememberZoomState. However, when I zoom in one, it zooms in all of them, and the idea is to zoom them individually.

I know I could do something similar using pointerInput, but the idea is to use the library.

Could you tell me if this would be possible?

My Code:

@Composable
internal fun ScreenShotDrawSpeech(
    bubbleDomain: BubbleDomain,
    modifier: Modifier = Modifier,
) {
    val textMeasurer = rememberTextMeasurer()
    val zoom = rememberZoomableState()

    Canvas(
        modifier = modifier
            .fillMaxSize()
            .background(background_overlay)
            .zoomable(zoom),
        onDraw = {
            bubbleDomain.predictions.forEach { prediction ->
                val left = prediction.x - prediction.width / 2
                val top = prediction.y - prediction.height / 2
                val right = left + prediction.width
                val bottom = top + prediction.height

                val rect = Rect(left.toInt(), top.toInt(), right.toInt(), bottom.toInt())

                drawSpeechBoundingBox(text = prediction.confidence.toString(), boundingBox = rect, textMeasurer = textMeasurer)
            }
        },
    )
}
saket commented 1 month ago

Were you able to find a solution @CharlesMoreira1?

CharlesMoreira1 commented 1 month ago

Hi, @saket!

Yes. In fact, using zoomable individually for each drawText was not possible. So for the sake of improvements I decided to change everything to Composables and I managed to make it work well.

Anyway, thank you for your attention!