在弧的中間繪制帶有內部文本的弧

Question

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

我想在中間的那條弧線內繪制文字。

例子：

試：

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

但是，這不是在正確的位置繪制文本，也不是所需的方向。

Answer 1

這項工作。

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