Has anyone been able to draw an arc on a cvanas and keep it entirely within the canvas? I’m having ...

# compose

[mattinger]

Has anyone been able to draw an arc on a cvanas and keep it entirely within the canvas? I’m having trouble with this. For whatever reason, part of the ring being drawn is always outside the Box that i’m using. Code and screencap in the thread. I’ve even tried adding a padding to the BoxWithConstraints, but it doesn’t seem to affect anything.

[mattinger]

[mattinger]

// Take the given constraints, and make sure we maintain an aspect
    // ratio of 1:1, and add a bit of internal padding to account for the
    // stroke being drawn so that everything fits entirely within the box
    BoxWithConstraints(
        modifier = modifier
            .aspectRatio(1f),
        contentAlignment = Alignment.Center
    ) {
        Canvas(modifier = Modifier.size(constraints.maxWidth.dp, constraints.maxHeight.dp)) {
            drawArc(
                color = ringBackgroundColor,
                startAngle = 0f,
                sweepAngle = 360f,
                useCenter = false,
                style = Stroke(width = RING_STROKE_WIDTH.toPx(), cap = StrokeCap.Round)
            )
        }
    }

[mattinger]

I’ve also tried a box with padding around the BoxWithConstraints, but nothing seems to matter.

[Kirill Grouchnikov]

You're using the default values for topLeft and size. You need to compute your own based on your stroke width to "push" the visuals into the box

[mattinger]

I’ve basically done that now, but i’m just surprised that something like .padding on the BoxWithConstraints didn’t push the canvas in a little bit. it seemed to have done nothing.

[tad]

Padding in Compose is what everything else calls *margins"; it adds space to the layout's measured size.

[tad]

You'll get used to the idea that the only thing dictating a layout's size is itself and its children, and never the other way around. It's not like the CSS and Android box models, which take multiple passes to resolve the size.