曲线文本Jetpack compose

Question

我想在Jetpack Compose中创建弯曲的文本，就像“Material You”中一样。但是怎么做呢？ 示例：

- Renattele Renattele

---

你是什么意思说“物质”吗？你是不是认为我现在不再重视物质，而更注重精神层面了？ - undefined

@MARSK「Material You」- 是在 Google I/O 2021 中推出的新设计系统。 - undefined

哦，对了。谢谢你的知识。 - undefined

Answer 1

您可以使用 Canvas 进行此操作。Compose 本身没有绘制曲线文本的函数（据我所知，在 rc-01 版本中）。但是，使用 drawIntoCanvas 函数，您可以使用提供 drawTextOnPath 的nativeCanvas ，在其中可以在 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
            }
        )
    }
}

以下是结果：

- nglauber

---

如何调整这里的文本大小？ - undefined

在我的情况下，这是可以忽略不计的。 - undefined