如何在 Jetpack Compose 中勾勒文本

问题描述

我有一个 Jetpack Compose Text() 元素，我想用黑色勾勒出轮廓，例如

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

解决方法

您可以使用 Canvas 和 drawIntoCanvas 函数。

类似于：

Canvas(
    modifier = Modifier.fillMaxSize(),onDraw = {
                drawIntoCanvas {
                    it.nativeCanvas.drawText(
                        "Sample",0f,120.dp.toPx(),textPaintStroke
                    )
                    it.nativeCanvas.drawText(
                        "Sample",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
}