I'm playing around with `Canvas` and "finger drawing". I collect `Offset` points via `pointerInput...

# compose

[ursus]

I'm playing around with Canvas and "finger drawing".


I collect Offset points via pointerInput.detectDragGestures , seems easy enough

My issue is in order to draw that, I need a Path , i.e. List<Offset> -> Path mapping, i.e. a new Path instance every draw call, which doesn't seem optimal
Obviously just calling `moveTo`/`lineTo` on drag events won't do as that won't cause recomposition


What would be the best way to make this work?
Is there some neat way to wrap Path in something recomposition-triggering?

[ursus]

val points = remember {
    mutableStateListOf<Offset>()
}

Canvas(
    modifier = Modifier
        .fillMaxWidth()
        .height(256.dp)
        .pointerInput(Unit) {
            detectDragGestures(
                onDragStart = { offset ->
                    points.add(offset)
                },
                onDrag = { change, _ ->
                    points.add(change.position)
                }
            )
        }
) {
    val path = points.toPath() <-----------------
    drawPath(path, color = Color.Red)
}

[romainguy]

You can call reset() on a path so you don't have to create a new one

[romainguy]

And of course you can also call lineTo on gesture events and trigger a redraw manually (you don't need a recomposition! Just a repaint)

[ursus]

Doh, thanks!

[ursus]

Btw since you're here, how would you determine if say x% of the canvas was filled in?

Have a ImageBitmap backed Canvas, and then count the number of colored pixels?

But that variant of Canvas doesnt have Modifier to attach pointerInput

[romainguy]

You can attach the pointerInput to something that wraps your canvas

[romainguy]

And to determine the fill % yeah you’d have to count pixels. You may be able to do something smarter by computing the area of what you add to the Path but it can be very tricky

[romainguy]

You could also do something approximate

[romainguy]

I.e. keep your Canvas, create an offscreen canvas to render into a bitmap at a lower resolution, and render your path a second time in that bitmap

[romainguy]

As a bonus you can do that step on a worker thread at a different framerate

[romainguy]

Won’t be exact but good enough

[ursus]

Yea I was about to dust off the math notebooks 😀 but then I realized pixels are already discrete

[ursus]

okay so essentially draw into both, and use the latter just for the computation, I get it, thanks you!