如何在Jetpack Compose的Canvas上绘制旋转的单个元素（如X轴标签）

你之前旋转操作未达预期的核心原因是没有指定和当前标签绑定的旋转轴心，默认以画布左上角为基准旋转，自然会出现整体偏移的问题。你可以配合save()、指定轴心的rotate()、restore()流程实现单个标签独立倾斜，完全无需额外布局组件，适配你单Canvas实现的需求。

修改后的代码如下：

import android.graphics.Paint

// 提前计算标签Y轴坐标，避免循环内重复计算
val labelY = size.height + 4.dp.toPx()
// 可根据需求自行调整倾斜角度，负值为向左倾斜，正值为向右倾斜
val labelRotateDegree = -45f

data.forEachIndexed { index, point ->
    drawIntoCanvas { canvas ->
        val labelX = chartCanvasStartX + index * intervalX
        // 保存当前画布状态
        canvas.save()
        // 以当前标签的绘制坐标为轴心进行旋转
        canvas.rotate(
            degrees = labelRotateDegree,
            pivotX = labelX,
            pivotY = labelY
        )
        // 若需要让文本中心对齐刻度，可添加此行配置
        // textPaint.textAlign = Paint.Align.CENTER
        canvas.nativeCanvas.drawText(
            "${point.x}",
            labelX,
            labelY,
            textPaint
        )
        // 恢复画布状态，后续绘制不受本次旋转影响
        canvas.restore()
    }
}

补充调整说明：

• 调整labelRotateDegree的数值即可修改倾斜幅度，常用倾斜角度范围在-30到-60之间
• 若文本长度较长，可适当增大labelY的数值，避免倾斜后的文本和图表主体重叠

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