关键和之前的 TextView 一致
关键代码:
paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
完整代码:
@Composable
fun HollowText(
modifier: Modifier = Modifier, text: String, backgroundColor: Color
) {
Canvas(modifier = modifier.fillMaxSize()) {
drawIntoCanvas {
it.nativeCanvas.let { canvas ->
val x = size.width / 2
val y = size.height / 2
val layerId = canvas.saveLayer(
0f,
0f,
size.width,
size.height,
null,
)
val textStyle = TextStyle(
color = Color.Black,
fontSize = 24.sp,
fontWeight = FontWeight.Black
)
canvas.drawColor(backgroundColor.toArgb())
val mPaint = Paint().asFrameworkPaint().apply {
this.textSize = 120.sp.toPx()
textAlign = android.graphics.Paint.Align.CENTER
isAntiAlias = true
typeface = Typeface.create(Typeface.create(FontFamily.Default.toString(),FontStyle.Normal.value), FontWeight.Bold.weight)
}
mPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_OUT)
val textMetrics = mPaint.fontMetrics
val baseline = (size.height - textMetrics.ascent - textMetrics.descent) / 2
canvas.drawText(text,
x,
baseline,
mPaint)
mPaint.xfermode = null
canvas.restoreToCount(layerId)
}
}
}
}
简单方式
@Composable
fun HollowTextNew(
modifier: Modifier = Modifier, text: String, backgroundColor: Color
) {
val textMeasurer = rememberTextMeasurer()
var txtSize by remember {
mutableStateOf(100.sp)
}
val style = TextStyle(
fontFamily = FontFamily.SansSerif,
fontSize = txtSize,
fontWeight = FontWeight.Bold
)
Canvas(modifier = modifier.fillMaxSize()) {
drawIntoCanvas { canvas ->
canvas.saveLayer(
Rect(
Offset.Zero,
size
),
Paint()
)
drawRect(backgroundColor)
drawText(
textMeasurer = textMeasurer,
text = text,
topLeft = Offset(
100f,
0f
),
style = style,
blendMode = BlendMode.DstOut
)
canvas.restore()
}
}
}