How can I draw text on a path in Jetpack Compose?

user_539910 0
Viewed 4213

Is there a way to write text on a custom path with jetpack compose right now?

Here is an example image of what I want to achieve:

Text drawn on a half-circle path

android-jetpack-compose android
1 Answers

We use nativeCanvas to draw a text using Path in Compose, like how we do normally in Custom Views.

Ex:

@Composable
fun ArcTextExample() {
    val paint = Paint().asFrameworkPaint()
    Canvas(modifier = Modifier.fillMaxSize()) {
        paint.apply {
            isAntiAlias = true
            textSize = 24f
            typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
        }

        drawIntoCanvas {
            val path = Path()
            path.addArc(RectF(0f, 100f, 200f, 300f), 270f, 180f)
            it.nativeCanvas.drawTextOnPath("Hello World Example", path, 0f, 0f, paint)
        }
    }
}

Note: we should use android.graphics.Path

And the result will be like:

enter image description here

user_9001280
Related