如何在 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
}