Draw arc with inner text in middle of arc

Question

Drawing an arc in compose:

val sizeInPx = with(LocalDensity.current) { 100.dp.toPx() }
Canvas(modifier = Modifier.fillMaxSize()) {
   drawArc(
      Color.Green,
      200f,
      40f,
      topLeft = Offset(0f, 0f),
      useCenter = true,
      size = Size(sizeInPx, sizeInPx)
   )
}

And I would like to draw text inside that arc in the middle.

Example:

Trying:

val middleAngle = 220f
val path = Path()
path.addArc(RectF(0f, 0f, 100f, 100f), middleAngle, middleAngle)
it.nativeCanvas.drawTextOnPath(sector.text, path, 0f, 0f, paint)

However this is not drawing the text in the right place, nor the desired orientation.

Answer 1

This work.

@Composable
fun Test(modifier: Modifier) {
    val paint = Paint().asFrameworkPaint()
    val sizeInPx = with(LocalDensity.current) { 300.dp.toPx() }

    val x = 100f
    val y = 400f
    Canvas(modifier = modifier) {
        drawArc(
            Color.Green,
            200f,
            40f,
            topLeft = Offset(x, y),
            useCenter = true,
            size = Size(sizeInPx, sizeInPx)
        )
        paint.apply {
            textAlign = android.graphics.Paint.Align.CENTER
            isAntiAlias = true
            textSize = 24f
            typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
        }
        drawIntoCanvas {
            val path = Path()
            path.addArc(RectF(x, y, x + sizeInPx, y + sizeInPx), 240f, -40f)
            it.nativeCanvas.drawTextOnPath("Hello world", path, 0f, 0f, paint)
        }
    }
}