Search code examples
androidkotlinandroid-jetpack-composeandroid-canvasandroid-jetpack-compose-canvas

How to Center an Arc on the Canvas - Jetpack Compose?


I'm not sure how can I do the calculation in order to center this arc on the canvas? Can someone point me in the proper direction?

Canvas(modifier = Modifier
    .background(Color.LightGray)
    .fillMaxWidth()
    .height(300.dp)
) {
        drawArc(
            color = Color.Blue,
            startAngle = 30f,
            sweepAngle = 300f,
            useCenter = false,
            style = Stroke(width = 50f, cap = StrokeCap.Round),
            size = size/2.25F
        )
}

Solution

  • Use the topLeft parameter in the drawArc method.

    Something like:

        val sizeArc = size/2.25F
        drawArc(
            color = Color.Blue,
            startAngle = 30f,
            sweepAngle = 300f,
            topLeft = Offset((size.width - sizeArc.width)/2f,(size.height - sizeArc.height)/2f),
            useCenter = false,
            style = Stroke(width = 50f, cap = StrokeCap.Round),
            size = sizeArc
        )
    

    enter image description here