如何在Jetpack Compose中实现块间曲线绘制？

我无法在父容器内的块之间绘制曲线。我尝试生成块间连线，具体操作如下：

• 通过用户长按操作生成一个条带，在其下方创建Canvas，该Canvas覆盖在父容器上方，首尾连接两个块

实现代码 #

@Composable
fun DrawingScreen() {
 var path by remember { mutableStateOf(Path()) }
 var lineThickness by remember { mutableStateOf(0f) }
 var canvasSize by remember { mutableStateOf(0) }
 var isDrawing by remember { mutableStateOf(false) }

 Box(
     modifier = Modifier.fillMaxSize()
 ) {
     Box(
         modifier = Modifier
             .fillMaxWidth()
             .height(100.dp)
             .background(Color.White)
             .pointerInput(Unit) {
                 detectDragGestures { change, dragAmount ->
                     val x = change.position.x
                     val y = change.position.y
                     if (change.pressure > 0.1f) {
                         path.lineTo(x, y)
                         lineThickness = change.pressure * 30
                         if (!isDrawing) {
                             isDrawing = true
                             canvasSize = 0
                         }
                     } else {
                         path.moveTo(x, y)
                     }
                     canvasSize = max(canvasSize, path.getBounds().width.toInt())
                 }
             }
     )
     if (isDrawing) {
         Canvas(
             modifier = Modifier
                 .size(canvasSize.dp, canvasSize.dp)
                 .offset(y = 100.dp)
         ) {
             drawPath(
                 path = path,
                 color = Color.Black,
                 alpha = 1f,
                 style = Stroke(width = lineThickness)
             )
         }
     }
 }
}

我也觉得这种实现方式有些怪异，但实在不清楚还有什么其他可行方案，参考示例来自Blueprint（截图如下）：

核心问题： 遗憾的是，我无法为箭头生成合适的Canvas。能否告知我，我的实现思路是否有误？或者是否存在现成的API可用于此类需求？
我还找到一个可能有用的库，但它仅支持SwiftUI，是否有适用于Jetpack Compose的同类库？

解决方案与思路 #

1. 当前实现的问题点

你的思路存在几个关键问题：

• Canvas尺寸与定位错误：path.getBounds()获取的是像素值，直接转dp会导致单位混乱；固定offset(y=100.dp)无法适配不同块的位置，也不能实现跨块连线。
• 路径逻辑偏离需求：你用拖拽绘制路径的方式，和“块间自动生成曲线连线”的需求不匹配，应该先记录两个块的连接锚点，再基于锚点生成曲线。

2. 正确实现思路

要实现块间曲线连线，推荐按以下步骤操作：

• 给每个可连接的块标记连接锚点（比如块的底部中心、侧边中点），通过localToGlobal获取锚点的全局坐标。
• 在父容器顶层放置一个全屏Canvas，统一绘制所有连线，无需为每条线单独创建Canvas。
• 当用户完成连接操作（比如长按块拖拽到目标块），用Compose的Path API生成平滑曲线（推荐用quadraticBezierTo或cubicTo实现贝塞尔曲线）。
• 箭头绘制可通过计算曲线终点的切线方向，在终点添加三角形路径实现。

3. Jetpack Compose可用工具

无需第三方库，Compose内置的Path API完全支持贝塞尔曲线、自定义路径绘制，足够满足这类需求。如果需要更复杂的曲线交互，可以基于Path封装自定义绘制工具。

简化示例代码

@Composable
fun BlockConnectionDemo() {
    val startAnchor = remember { mutableStateOf(Offset.Zero) }
    val endAnchor = remember { mutableStateOf(Offset.Zero) }
    val isConnected = remember { mutableStateOf(false) }

    Box(modifier = Modifier.fillMaxSize()) {
        // 第一个可连接块
        Box(
            modifier = Modifier
                .size(100.dp, 60.dp)
                .background(Color.Blue)
                .align(Alignment.TopStart)
                .pointerInput(Unit) {
                    detectTapGestures(onLongPress = {
                        // 获取块底部中心的全局坐标作为起始锚点
                        val globalOffset = localToGlobal(Offset(size.width/2, size.height))
                        startAnchor.value = globalOffset
                    })
                }
        )

        // 第二个可连接块
        Box(
            modifier = Modifier
                .size(100.dp, 60.dp)
                .background(Color.Green)
                .align(Alignment.BottomEnd)
                .pointerInput(Unit) {
                    detectTapGestures(onTap = {
                        // 获取块顶部中心的全局坐标作为结束锚点
                        val globalOffset = localToGlobal(Offset(size.width/2, 0f))
                        endAnchor.value = globalOffset
                        isConnected.value = true
                    })
                }
        )

        // 顶层画布绘制连线
        Canvas(modifier = Modifier.fillMaxSize()) {
            if (isConnected.value) {
                val curvePath = Path().apply {
                    moveTo(startAnchor.value.x, startAnchor.value.y)
                    // 生成二次贝塞尔曲线，控制点取两点中间上方
                    val controlPoint = Offset(
                        (startAnchor.value.x + endAnchor.value.x)/2,
                        (startAnchor.value.y + endAnchor.value.y)/2 - 50.dp.toPx()
                    )
                    quadraticBezierTo(
                        controlPoint.x, controlPoint.y,
                        endAnchor.value.x, endAnchor.value.y
                    )
                }
                // 绘制曲线
                drawPath(curvePath, Color.Black, style = Stroke(width = 4f))
                // 绘制箭头
                drawArrow(endAnchor.value, curvePath)
            }
        }
    }
}

// 辅助函数：绘制箭头
fun DrawScope.drawArrow(endOffset: Offset, path: Path) {
    val pathBounds = path.getBounds()
    // 计算终点切线方向（简化处理）
    val direction = Offset(
        endOffset.x - pathBounds.centerX(),
        endOffset.y - pathBounds.centerY()
    ).normalize()
    val arrowSize = 12f
    val arrowPath = Path().apply {
        moveTo(endOffset.x, endOffset.y)
        lineTo(
            endOffset.x - direction.x * arrowSize - direction.y * arrowSize,
            endOffset.y - direction.y * arrowSize + direction.x * arrowSize
        )
        lineTo(
            endOffset.x - direction.x * arrowSize + direction.y * arrowSize,
            endOffset.y - direction.y * arrowSize - direction.x * arrowSize
        )
        close()
    }
    drawPath(arrowPath, Color.Black)
}

// 辅助函数：归一化向量
fun Offset.normalize(): Offset {
    val length = sqrt(x*x + y*y)
    return Offset(x/length, y/length)
}

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