2

我想在 Jetpack Compose 中创建弯曲文本,就像在“Material You”中一样。但是怎么做?例子: 钟

4

1 回答 1

7

您可以使用Canvas. Compose 本身没有绘制弯曲文本的功能(afaik in rc-01)。但是使用drawIntoCanvas函数,您可以使用nativeCanvaswhich 提供drawTextOnPath您可以在Path. 在此Path您添加一个弧,因此您的文本将在此路径中绘制。

Canvas(
    modifier = Modifier
        .size(300.dp)
        .background(Color.Gray)
) {
    drawIntoCanvas {
        val textPadding = 48.dp.toPx()
        val arcHeight = 400.dp.toPx()
        val arcWidth = 300.dp.toPx()
        val path = Path().apply {
            addArc(0f, textPadding, arcWidth, arcHeight, 180f, 180f)
        }
        it.nativeCanvas.drawTextOnPath(
            "Curved Text with Jetpack Compose",
            path,
            0f,
            0f,
            Paint().apply {
                textSize = 16.sp.toPx()
                textAlign = Paint.Align.CENTER
            }
        )
    }
}

结果如下:

在此处输入图像描述

于 2021-07-17T00:13:11.680 回答