Android Compose：Canvas中drawText底部截断顶部正常的原因排查

核心问题 #

底部文本被截断的原因是Canvas的绘制范围被父Box的固定高度（300.dp）限制，底部标签的位置接近或超出Canvas的底部边界，而Box默认会裁剪超出自身尺寸的内容。顶部文本能显示是因为它位于Canvas上方，刚好落在Box的top padding（20.dp）区域内，未被裁剪。

修复步骤 #

1. 给父Box添加底部内边距
   给包裹Canvas的Box增加底部padding，预留出标签的显示空间，避免被裁剪：

   Box(modifier = Modifier
       .width(configuration.screenWidthDp.dp)
       .height(300.dp)
       .padding(start = 30.dp, top = 20.dp, bottom = 20.dp) // 新增底部内边距
   )
   

2. 调整坐标轴与标签的布局计算
   将底部预留空间纳入坐标轴高度计算，确保标签完全落在Canvas范围内：

   Canvas(modifier = Modifier.fillMaxSize()) {
       // ... 其他原有代码 ...
       val bottomLabelOffset = 20.dp.toPx() // 标签所需的底部预留空间
       val availableHeight = size.height - bottomLabelOffset // 坐标轴可用高度
       val horizontalSize = availableHeight / (horizontalLines + 1) // 重新计算水平刻度间隔
   
       // 调整底部标签的Y坐标，避免超出Canvas边界
       drawText(
           textMeasurer, 
           text = "Label", 
           style = TextStyle(fontSize = 12.sp, color = textColor), 
           topLeft = Offset(myWidth, horizontalSize * 3)
       )
       // ... 其他drawText调用同理调整 ...
   }
   

3. 可选：关闭Canvas裁剪（不推荐）
   若需要让内容超出Canvas范围显示，可给Canvas添加clipToBounds = false参数，但可能导致布局混乱，优先推荐前两种方法：

   Canvas(modifier = Modifier.fillMaxSize(), clipToBounds = false) {
       // ... 原有绘制代码 ...
   }
   

额外优化建议 #

• 避免使用LocalConfiguration.current获取屏幕宽度，直接用Modifier.fillMaxWidth()更符合Compose布局规范。
• 结合文本测量精准定位标签，避免手动估算偏移：

  val textLayoutResult = textMeasurer.measure("Label", TextStyle(fontSize = 12.sp))
  val textHeight = textLayoutResult.size.height.toFloat()
  // 让文本垂直居中对齐刻度线
  drawText(
      textMeasurer,
      text = "Label",
      topLeft = Offset(myWidth, targetY - textHeight / 2)
  )
  

内容的提问来源于stack exchange，提问作者MajinKenn