使用Canvas与detectDragGestures绘制直线出现混乱，求修正方案

你的代码画出混乱线条的核心原因是：每次拖拽都把所有拖拽轨迹的历史点加入到了绘制列表中，导致Path连接了所有中间移动点，形成了跟随鼠标的折线，而非固定的直线。直线只需要两个关键坐标：拖拽的起点，以及拖拽过程中的实时终点。

以下是修复后的完整代码：

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun CanvasAction() {
    // 保存当前正在绘制的直线：起点和实时终点
    data class Line(val start: Offset, val end: Offset)
    var currentLine by remember { mutableStateOf<Line?>(null) }
    // 可选：保存已绘制完成的所有直线
    var drawnLines by remember { mutableStateOf<List<Line>>(emptyList()) }

    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(key1 = Unit) {
                detectDragGestures(
                    onDragStart = { offset ->
                        // 拖拽开始时，记录直线起点
                        currentLine = Line(start = offset, end = offset)
                    },
                    onDrag = { _, dragAmount ->
                        // 拖拽过程中，更新直线终点（基于起点加上拖拽偏移）
                        currentLine?.let {
                            currentLine = it.copy(end = it.start + dragAmount)
                        }
                    },
                    onDragEnd = {
                        // 拖拽结束时，将当前直线加入已绘制列表
                        currentLine?.let {
                            drawnLines = drawnLines + it
                        }
                        currentLine = null
                    }
                )
            }
    ) {
        // 绘制已完成的直线
        drawnLines.forEach { line ->
            drawLine(
                color = Color.Blue,
                start = line.start,
                end = line.end,
                strokeWidth = 2.dp.toPx()
            )
        }

        // 绘制正在拖拽的实时直线
        currentLine?.let { line ->
            drawLine(
                color = Color.Blue.copy(alpha = 0.7f),
                start = line.start,
                end = line.end,
                strokeWidth = 2.dp.toPx()
            )
            // 绘制起点标记
            drawCircle(
                color = Color.Blue,
                radius = 7.dp.toPx(),
                center = line.start
            )
            // 绘制当前终点标记
            drawCircle(
                color = Color.Blue,
                radius = 7.dp.toPx(),
                center = line.end
            )
        }
    }
}

关键修改说明： #

• 状态简化：用currentLine保存当前正在绘制的直线的起点和终点，不再维护大量历史点，只保留直线的两个关键坐标
• 拖拽逻辑优化：
  • onDragStart：仅记录拖拽起点，初始化当前直线
  • onDrag：通过拖拽偏移量计算实时终点，直接更新直线的终点坐标，无需处理historical中间点
  • onDragEnd：将完成的直线存入已绘制列表，清空当前直线状态
• 绘制逻辑简化：直接使用Compose提供的drawLine方法绘制直线，无需构建复杂的Path，代码更简洁高效
• 交互体验优化：正在绘制的直线使用半透明效果，区分已完成的直线，同时保留起点和终点的圆圈标记

这样修改后，拖拽过程中会实时显示从起点到当前鼠标位置的直线，松手后直线会被保留，完全符合直线绘制需求。

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