在 Jetpack Compose 中精确绘制文本

2024-01-07

我试图在 Jetpack Compose 中在圆形和方形内绘制文本,但遇到了这个问题。 文本支架/容器(我不知道我们怎么称呼它),即保存实际文本的浅红色矩形,不会将绘制的文本居中。

我跟着this https://stackoverflow.com/a/76083824/9184497答案是将文本精确地绘制在圆的中心,但它似乎仍然不精确地在圆的中心。正如我们所看到的,文本位于浅红色矩形内的下半部分。

正如我们在这张图片中看到的,文本已经接触到圆圈的下部,而顶部有足够的空间。

是不是要处理基线?如何解决这个问题?

或者这是一个错误?

代码:

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Green.copy(alpha = 0.2f))
        .padding(36.dp),
    contentAlignment = Alignment.Center
) {
    val textMeasurer = rememberTextMeasurer()
    val textToDraw = "O"
    val style = TextStyle(
        fontSize = 328.sp,
        background = Color.Red.copy(alpha = 0.2f)
    )
    val textLayoutResult = remember(textToDraw, style) {
        textMeasurer.measure(textToDraw, style)
    }

    Canvas(modifier = Modifier.fillMaxSize()) {
        drawCircle(
            center = Offset(
                x = center.x,
                y = center.y
            ),
            radius = 350f,
            color = Color.Blue,
            style = Stroke(
                width = 8f
            )
        )
        drawText(
            textMeasurer = textMeasurer,
            text = textToDraw,
            style = style,
            topLeft = Offset(
                x = center.x - textLayoutResult.size.width / 2,
                y = center.y - textLayoutResult.size.height / 2
            )
        )
        drawPoints(
            points = listOf(Offset(center.x, center.y)),
            pointMode = PointMode.Points,
            cap = StrokeCap.Round,
            color = Color.Red,
            strokeWidth = 25f
        )
    }
}

如果我将字体变小(上面代码中大约为 176sp),它看起来如下所示。这表明浅红色矩形完全位于圆的中心,而不仅仅是它所包含的文本。

任何帮助或建议表示赞赏。


这可能与字体规格以及平台在文本第一行顶部和最后一行底部添加的不均匀填充(也称为 includeFontPadding)有关。

你为什么不尝试一下:

        val style = TextStyle(
            fontSize = 328.sp,
            background = Red.copy(alpha = 0.2f),
            platformStyle = PlatformTextStyle(includeFontPadding = false)
        )

这应该会给你一个更准确的结果:

由于像素精确度和字形本身不可避免的填充(用于绘制字符的实际图像),结果可能不是 100% 完美。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Jetpack Compose 中精确绘制文本 的相关文章

随机推荐