Jetpck compose 镂空 Text

250 阅读1分钟

关键和之前的 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()
        }
    }
}