我试图在 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),它看起来如下所示。这表明浅红色矩形完全位于圆的中心,而不仅仅是它所包含的文本。
任何帮助或建议表示赞赏。