Jetpack Compose使用Canvas绘制文字

818 阅读1分钟

Compose中如何绘制文字呢?目前发现还是需要借助原生的Canvas方法去绘制的,这里面就涉及到一些转换,代码如下:

@Composable
fun BaseText(text:String,textFloat:Float,composeColor:androidx.compose.ui.graphics.Color= androidx.compose.ui.graphics.Color.Red) {
    val context= LocalContext.current
    val dm=context.resources.displayMetrics
    val screenWidth=dm.widthPixels
    val rate=screenWidth/750.0f
    val textSize=rate*textFloat*2
    val paint=Paint().asFrameworkPaint()
    paint.color =  Color.argb((composeColor.alpha*255f).toInt(),(composeColor.red*255f).toInt(),(composeColor.green*255f).toInt(),(composeColor.blue*255f).toInt())
    paint.textSize=textSize
    val fm: android.graphics.Paint.FontMetrics = paint.fontMetrics
    val baseLineY= -fm.ascent
    val contentHeight=fm.descent - fm.ascent
    val textDp=contentHeight/(2.625f)
    Canvas(modifier = Modifier.height(height = textDp.dp), onDraw = {
        drawIntoCanvas {
            it.nativeCanvas.drawText(text,0f,baseLineY, paint)
        }
    })
}

Compose中的Text是没有原生TextView的includeFontPadding这个属性,如果不想Text有间隙的话,一个是可以在Compose中使用TextView,二个是使用Canvas绘制文字也能达到效果。