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

Question

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

标签： androidandroid-jetpack-composeandroid-jetpack-compose-text

Answer 1

您可以使用 aCanvas和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
}