Jetpack Compose中如何使用Canvas绘制曲线

这类自定义平滑曲线用Jetpack Compose的Canvas组件配合贝塞尔路径就能快速实现，不需要引入第三方依赖，核心逻辑分三步：构建平滑路径、配置自定义样式、绘制到画布。

核心逻辑拆解 #

• 平滑曲线生成：不要用多段直线拼接，改用Path.cubicTo()三次贝塞尔曲线接口，通过自动计算控制点保证曲线经过每个预设锚点时没有折角
• 样式配置：描边支持直接传入Brush对象实现渐变效果，Stroke参数可以配置线宽、端点圆角、路径特效
• 进阶效果（动态粗细）：如果需要做两端收尖、中间位置线宽变化的效果，把整条路径按长度切分为多段短路径，每段根据所在位置单独设置线宽逐段绘制即可

可直接复用的代码 #

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.dp

@Composable
fun StyledCurve() {
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
    ) {
        // 配置曲线经过的锚点坐标，可根据需求自定义起伏位置
        val curveAnchors = listOf(
            Offset(0f, size.height * 0.8f),
            Offset(size.width * 0.25f, size.height * 0.3f),
            Offset(size.width * 0.5f, size.height * 0.7f),
            Offset(size.width * 0.75f, size.height * 0.2f),
            Offset(size.width, size.height * 0.8f)
        )

        // 构建平滑贝塞尔路径
        val path = Path().apply {
            moveTo(curveAnchors.first().x, curveAnchors.first().y)
            for (i in 1 until curveAnchors.size) {
                val prev = curveAnchors[i-1]
                val curr = curveAnchors[i]
                // 取两点中点作为控制点基准，保证曲线平滑过渡
                val c1 = Offset(prev.x + (curr.x - prev.x)*0.5f, prev.y)
                val c2 = Offset(prev.x + (curr.x - prev.x)*0.5f, curr.y)
                cubicTo(c1.x, c1.y, c2.x, c2.y, curr.x, curr.y)
            }
        }

        // 配置渐变描边样式
        val gradientBrush = Brush.horizontalGradient(
            colors = listOf(
                Color(0xFF6366F1),
                Color(0xFF22D3EE),
                Color(0xFFF43F5E)
            )
        )

        // 绘制曲线
        drawPath(
            path = path,
            brush = gradientBrush,
            style = Stroke(
                width = 8.dp.toPx(),
                cap = StrokeCap.Round
            )
        )
    }
}

参数调整说明 #

• 曲线形态：修改curveAnchors列表里的坐标值，就能调整曲线的起伏高度、波动位置
• 颜色效果：替换gradientBrush的色值，也可以换成verticalGradient/radialGradient实现不同方向、类型的渐变
• 线宽样式：修改Stroke的width参数调整整体粗细，要做动态粗细效果就拆分路径逐段设置width绘制
• 平滑程度：调整控制点计算时的0.5f比例，数值越小曲线在锚点处的转折越锐利，越大越平缓

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