Jetpack Compose带标签饼图绘制问题及居中标签实现咨询

一、起始位置标签偏移问题排查 #

导致标签偏移不符合预期的常见原因及修复方式：

• 角度基准不匹配：Compose Canvas 默认0度对应右侧（3点钟方向），若你以上方（12点钟）为角度基准，会出现整体偏移。需将起始角度转换为Canvas坐标系：canvasStartAngle = 270f - yourOriginalStartAngle（270度对应12点钟方向）。
• 坐标计算未锚定中心：标签坐标需基于饼图中心(x,y)计算，结合半径+间距的偏移量，用三角函数推导：

  val angleInRadians = Math.toRadians(targetAngle.toDouble()).toFloat()
  val labelX = centerX + (radius + spacingDp.toPx()) * cos(angleInRadians)
  val labelY = centerY + (radius + spacingDp.toPx()) * sin(angleInRadians)
  

  注意必须将角度转为弧度计算。
• 文本对齐逻辑缺失：仅用默认TextAlign.Center会导致部分标签偏移，需根据角度所在象限动态调整：左半区（90°-270°）用TextAlign.End，右半区用TextAlign.Start，避免文本被截断或错位。

二、分段中心外部标签实现方案 #

要实现标签位于分段中心且保持在饼图外部，核心步骤：

1. 计算分段中间角度：每个分段的中间角度 = 分段起始角度 + 分段角度/2
2. 推导标签坐标：基于中间角度，用「饼图半径+标签间距」计算标签的x/y坐标
3. 动态调整对齐方式：根据中间角度所在象限切换文本对齐，确保标签始终在饼图外侧且不遮挡

三、完整代码示例 #

以下代码包含两种标签模式（起始位置/中心位置）的可切换实现：

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.text.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlin.math.cos
import kotlin.math.sin
import kotlin.math.toRadians

data class PieSegment(
    val value: Float,
    val color: Color,
    val label: String
)

enum class LabelPosition {
    SEGMENT_START,
    SEGMENT_CENTER
}

@Composable
fun PieChart(
    segments: List<PieSegment>,
    modifier: Modifier = Modifier,
    size: Dp = 200.dp,
    labelSpacing: Dp = 10.dp,
    labelPosition: LabelPosition = LabelPosition.SEGMENT_CENTER
) {
    val totalValue = segments.sumOf { it.value.toDouble() }.toFloat()
    Canvas(modifier = modifier.size(size)) {
        val centerX = size.toPx() / 2f
        val centerY = size.toPx() / 2f
        val radius = size.toPx() / 2f - 20.dp.toPx() // 预留饼图内边距
        val spacingPx = labelSpacing.toPx()

        var currentStartAngle = 270f // 以12点钟为饼图起始基准

        segments.forEach { segment ->
            val sweepAngle = (segment.value / totalValue) * 360f
            // 绘制饼图分段
            drawArc(
                color = segment.color,
                startAngle = currentStartAngle,
                sweepAngle = sweepAngle,
                useCenter = true,
                topLeft = Offset(centerX - radius, centerY - radius),
                size = Size(radius * 2, radius * 2)
            )

            // 计算目标角度（起始/中心）
            val targetAngle = when (labelPosition) {
                LabelPosition.SEGMENT_START -> currentStartAngle
                LabelPosition.SEGMENT_CENTER -> currentStartAngle + sweepAngle / 2f
            }
            val angleInRadians = targetAngle.toDouble().toRadians().toFloat()
            // 计算标签坐标
            val labelX = centerX + (radius + spacingPx) * cos(angleInRadians)
            val labelY = centerY + (radius + spacingPx) * sin(angleInRadians)

            // 动态设置文本对齐
            val textAlign = when {
                targetAngle in 90f..270f -> TextAlign.End
                else -> TextAlign.Start
            }

            // 绘制标签
            drawContext.canvas.nativeCanvas.apply {
                drawText(
                    segment.label,
                    labelX,
                    labelY,
                    android.graphics.Paint().apply {
                        textSize = 14.sp.toPx()
                        color = android.graphics.Color.BLACK
                        textAlign = when (textAlign) {
                            TextAlign.Start -> android.graphics.Paint.Align.LEFT
                            TextAlign.End -> android.graphics.Paint.Align.RIGHT
                            else -> android.graphics.Paint.Align.CENTER
                        }
                    }
                )
            }

            currentStartAngle += sweepAngle
        }
    }
}

// 使用示例
@Composable
fun PieChartDemo() {
    val segments = listOf(
        PieSegment(30f, Color.Red, "Red"),
        PieSegment(20f, Color.Blue, "Blue"),
        PieSegment(50f, Color.Green, "Green")
    )
    PieChart(
        segments = segments,
        labelPosition = LabelPosition.SEGMENT_CENTER
    )
}

四、关键细节说明 #

• 角度基准统一：用270°作为饼图起始角度，对齐12点钟方向，符合常规视觉习惯
• 坐标精度保障：通过toPx()将dp单位转换为像素，确保间距10dp的准确性
• 对齐逻辑适配：根据标签所在象限切换对齐方式，避免文本被饼图遮挡或偏移
• 可扩展性：通过LabelPosition枚举快速切换两种标签模式，便于后续扩展其他布局

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