Individual Zoom for Canvas Rectangles using rememberZoomState.

[CharlesMoreira1]

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)
            }
        },
    )
}

[usuiat]

@CharlesMoreira1 Thanks for using Zoomable.

Modifier.zoomable is effective for a composable function. It is not intended to be used to zoom a portion of a composable function.

In your code, all the rectangles are drawn in the Canvas to which you are applying zoomable. Therefore, all the rectangles will zoom at the same time.

If you want to zoom individual rectangles, you need to draw one rectangle in one Canvas and apply zoomable to each Canvas. (But if composables are overlapped, the gesture may not be detected properly...)

[CharlesMoreira1]

Excellent explanation! I actually tried several things, so I changed from Canvas to Composable and now I'm able to use zoomable very well. Thank you very much!