绘图与画布 (Canvas)

源：Compose 图形

虽然 Compose 提供了丰富的内置组件，但有时你需要绘制自定义图形（如图表、自定义进度条）。Compose 提供了声明式的 Graphics API。

1. Canvas Composable

Canvas 是一个专门用于绘制的组件。它提供了一个 DrawScope 作用域。

Canvas(modifier = Modifier.size(100.dp)) {
    // 这里的 this 是 DrawScope
    // size.width 和 size.height 是当前画布大小
    
    // 1. 画圆
    drawCircle(
        color = Color.Red,
        radius = size.minDimension / 4
    )
    
    // 2. 画线
    drawLine(
        color = Color.Blue,
        start = Offset(0f, 0f),
        end = Offset(size.width, size.height),
        strokeWidth = 5f
    )
}

2. 常用绘制 API (DrawScope)

方法	描述
drawRect	绘制矩形
drawCircle	绘制圆形
drawArc	绘制圆弧（扇形或圆环）
drawLine	绘制直线
drawPath	绘制自定义路径 (Path)
drawImage	绘制位图 (ImageBitmap)

绘制圆环

drawArc(
    color = Color.Green,
    startAngle = 0f,
    sweepAngle = 270f,
    useCenter = false, // false = 圆环, true = 扇形
    style = Stroke(width = 10f)
)

绘制路径

val path = Path().apply {
    moveTo(0f, 0f)
    quadraticBezierTo(size.width / 2, size.height, size.width, 0f)
}
drawPath(path = path, color = Color.Magenta)

3. drawWithContent / drawBehind

如果你想修饰现有的 Composable（例如给 Text 加背景、边框或特效），可以使用 Modifier.drawBehind 或 Modifier.drawWithContent。

Text(
    text = "Hello Canvas",
    modifier = Modifier
        .padding(16.dp)
        .drawBehind {
            // 在内容后面绘制一个黄色圆圈
            drawCircle(color = Color.Yellow)
        }
)

4. 图形层 (GraphicsLayer)

graphicsLayer 修饰符用于对内容进行变换（平移、缩放、旋转、透明度、裁剪），它是 GPU 加速的。

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = null,
    modifier = Modifier
        .graphicsLayer {
            scaleX = 1.2f
            rotationZ = 45f
            alpha = 0.5f
            shadowElevation = 10.dp.toPx()
            shape = CircleShape
            clip = true
        }
)