Jetpack Compose中Canvas的drawText设置TextStyle后文本偏移问题

问题原因 #

你遇到的文本右偏问题，核心是测量文本时用的样式和绘制时不一致：没设置TextStyle时，你是用默认样式测量的textPercentWidth，但绘制时换成了带fontSize=20.sp和FontWeight.Bold的样式，这时候实际绘制的文本宽度比之前测量的要宽，导致你计算的水平偏移值偏小，文本自然就往右偏了。

解决步骤 #

1. 测量和绘制用完全相同的TextStyle
   不管是测量文本宽高，还是最终绘制，都要使用同一个TextStyle实例，这样测量出来的尺寸才和实际绘制的一致。
2. 用基线计算垂直居中更准确
   直接用文本高度计算垂直偏移可能会有偏差，建议基于文本的基线来调整，让垂直居中更精准。

修正后的代码示例 #

// 定义统一的TextStyle
val textStyle = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold)

// 用这个style测量文本，得到准确的布局信息
val textLayoutResult = textPercentMeasure.measure(
    text = textPercent,
    style = textStyle
)
val textWidth = textLayoutResult.size.width
val textBaseline = textLayoutResult.firstBaseline

// 绘制时使用相同的style，计算正确的偏移
drawText(
    textMeasurer = textPercentMeasure,
    text = textPercent,
    topLeft = Offset(
        // 水平居中：画布中点减去文本宽度的一半
        canvasWidth / 2 - textWidth / 2,
        // 垂直居中：画布中点减去基线高度的一半，让文本垂直居中
        canvasHeight / 2 - textBaseline / 2
    ),
    style = textStyle
)

额外说明 #

如果还是有偏移，可以检查canvasWidth和canvasHeight的获取是否正确——比如要确保是Canvas的实际可用尺寸，而不是父布局的尺寸。另外，有些字体在加粗后会有额外的字间距，统一样式测量就能避免这种误差。

内容的提问来源于stack exchange，提问作者有朋自远方来