android - 如何在 Jetpack Compose 中勾勒文本

Question

我有一个 Jetpack Compose Text() 元素，我想像这样 .
有人知道怎么做吗？
我尝试过使用border() 修饰符，但这只是在包含文本的矩形区域周围添加了一个边框。我也尝试过覆盖两个文本元素，但这也不太奏效。

Answer 1

您可以使用 Canvas和 drawIntoCanvas 功能。
就像是:

Canvas(
    modifier = Modifier.fillMaxSize(),
    onDraw = {
                drawIntoCanvas {
                    it.nativeCanvas.drawText(
                        "Sample",
                        0f,
                        120.dp.toPx(),
                        textPaintStroke
                    )
                    it.nativeCanvas.drawText(
                        "Sample",
                        0f,
                        120.dp.toPx(),
                        textPaint
                    )
                }
            }
)

与这些 Paint :

val textPaintStroke = Paint().asFrameworkPaint().apply {
    isAntiAlias = true
    style = android.graphics.Paint.Style.STROKE
    textSize = 64f
    color = android.graphics.Color.BLACK
    strokeWidth = 12f
    strokeMiter= 10f
    strokeJoin = android.graphics.Paint.Join.ROUND
}

val textPaint = Paint().asFrameworkPaint().apply {
    isAntiAlias = true
    style = android.graphics.Paint.Style.FILL
    textSize = 64f
    color = android.graphics.Color.WHITE
}