如何在Jetpack Compose画布绘制随Y值切换颜色的多色路径

方法一：拆分路径绘制 #

这是最直接的方案，不需要依赖遮罩。你可以在构建路径时，或者遍历原路径节点，把位于目标Y值上方和下方的部分分别拆成两个独立的Path对象，再用不同颜色分别绘制。

如果是折线类路径，拆分逻辑相对简单；如果是贝塞尔曲线，则需要计算曲线与目标Y轴的交点，再拆分曲线。以下是折线场景的示例代码：

val targetY = 200f
// 记录原路径的所有节点（构建路径时同步记录，避免Path无法直接获取节点的问题）
val pathPoints = listOf(
    Offset(50f, 150f),
    Offset(200f, 250f),
    Offset(350f, 180f),
    Offset(500f, 300f)
)

val upperPath = Path()
val lowerPath = Path()
var lastPoint: Offset? = null

pathPoints.forEachIndexed { index, currentPoint ->
    when (index) {
        0 -> {
            // 初始化第一个点到对应路径
            if (currentPoint.y < targetY) upperPath.moveTo(currentPoint.x, currentPoint.y)
            else lowerPath.moveTo(currentPoint.x, currentPoint.y)
        }
        else -> {
            val prevPoint = lastPoint!!
            // 判断当前线段是否跨越目标Y轴
            val crossesY = (prevPoint.y < targetY) != (currentPoint.y < targetY)
            
            if (crossesY) {
                // 计算线段与Y=targetY的交点
                val t = (targetY - prevPoint.y) / (currentPoint.y - prevPoint.y)
                val intersectionX = prevPoint.x + t * (currentPoint.x - prevPoint.x)
                val intersection = Offset(intersectionX, targetY)
                
                // 拆分线段到两个路径
                if (prevPoint.y < targetY) {
                    upperPath.lineTo(intersection.x, intersection.y)
                    lowerPath.moveTo(intersection.x, intersection.y)
                    lowerPath.lineTo(currentPoint.x, currentPoint.y)
                } else {
                    lowerPath.lineTo(intersection.x, intersection.y)
                    upperPath.moveTo(intersection.x, intersection.y)
                    upperPath.lineTo(currentPoint.x, currentPoint.y)
                }
            } else {
                // 线段完全在单侧，直接添加到对应路径
                if (currentPoint.y < targetY) upperPath.lineTo(currentPoint.x, currentPoint.y)
                else lowerPath.lineTo(currentPoint.x, currentPoint.y)
            }
        }
    }
    lastPoint = currentPoint
}

// 画布中绘制两个路径
Canvas(modifier = Modifier.fillMaxSize()) {
    drawPath(upperPath, color = Color.Blue)
    drawPath(lowerPath, color = Color.Red)
}

方法二：使用裁剪遮罩实现 #

如果不需要对上下路径做独立样式调整，裁剪遮罩的方式更简洁，无需处理复杂的路径拆分逻辑。核心思路是：先绘制整个路径为一种颜色，再通过clipRect裁剪出目标Y值的单侧区域，用另一种颜色重绘路径。

示例代码：

val targetY = 200f
val originalPath = Path().apply {
    moveTo(50f, 150f)
    lineTo(200f, 250f)
    lineTo(350f, 180f)
    lineTo(500f, 300f)
}

Canvas(modifier = Modifier.fillMaxSize()) {
    // 先绘制下方区域的颜色
    drawPath(originalPath, color = Color.Red)
    
    // 裁剪出Y值上方的区域，重绘路径为上方颜色
    clipRect(top = 0f, bottom = targetY) {
        drawPath(originalPath, color = Color.Blue)
    }
}

两种方案对比 #

• 拆分路径：适合需要对上下路径设置不同笔触、虚线等独立样式的场景，但复杂曲线的拆分逻辑会比较繁琐。
• 裁剪遮罩：代码量少、实现简单，仅需颜色区分的场景首选，无需修改原路径结构。

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