Android Compose自定义曲线绘制求助：无法在drawBehind实现预期曲线

核心实现思路 #

Jetpack Compose的drawBehind lambda支持通过Path绘制任意自定义曲线，你可以直接替换原有的drawLine逻辑，改用贝塞尔曲线实现需求的曲线效果。针对你的节点结构（如节点a同时连接b、c，b、c均连接d），推荐使用二次贝塞尔曲线，通过计算差异化的控制点避免曲线重叠。

修改后的完整代码示例 #

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight()
        .verticalScroll(scrollState)
        .drawBehind {
            val curveOffset = 80.dp.toPx() // 控制曲线弯曲程度，可按需调整
            for (i in nodes) {
                for (j in 0 until i.connections.size) {
                    val destinationNode = i.connections[j]
                    val sourceCoordinates = i.sourceCoordinates
                    val destinationCoordinates = nodes.find { it.name == destinationNode }?.sourceCoordinates
                    
                    if (sourceCoordinates != null && destinationCoordinates != null) {
                        val start = Offset(sourceCoordinates.x, sourceCoordinates.y)
                        val end = Offset(destinationCoordinates.x, destinationCoordinates.y)
                        
                        // 计算二次贝塞尔曲线的控制点
                        val midX = (start.x + end.x) / 2
                        val midY = (start.y + end.y) / 2
                        val controlPoint = if (i.connections.size > 1) {
                            // 多连接时，按索引左右偏移控制点，避免曲线重叠
                            val offsetX = if (j % 2 == 0) -curveOffset else curveOffset
                            Offset(midX + offsetX, midY)
                        } else {
                            // 单连接时，控制点向中点上方偏移，生成自然弧度
                            Offset(midX, midY - curveOffset)
                        }
                        
                        // 构建曲线路径
                        val path = Path().apply {
                            moveTo(start.x, start.y)
                            quadraticBezierTo(controlPoint.x, controlPoint.y, end.x, end.y)
                        }
                        
                        // 绘制曲线
                        drawPath(
                            path = path,
                            color = Color.Black,
                            style = Stroke(width = 1.dp.toPx())
                        )
                    }
                }
            }
        }
)

关键细节说明 #

• curveOffset：调整该值可以控制曲线的弯曲幅度，值越大曲线弧度越明显
• 多连接场景处理：当源节点有多个目标节点时，通过给不同索引的连接设置左右偏移的控制点，让曲线向不同方向展开，避免多条曲线重叠在一起
• 曲线类型选择：示例使用quadraticBezierTo实现二次贝塞尔曲线，如果你需要更复杂的曲线形态，可以改用cubicTo实现三次贝塞尔曲线，只需要额外添加一个控制点即可

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