如何在Android Compose Canvas的DrawScope中仅给描边单端添加线帽？

结论 #

Compose Canvas 的 DrawScope 原生 drawLine 接口不支持仅对单个端点应用线帽效果，Stroke 配置的 cap 属性会同时作用于线条的两个端点。可通过以下三种方案实现单端线帽需求：

方案1：拆分线条拼接 #

• 核心逻辑：将完整线条拆分为两段，不需要线帽的一端绘制1倍线宽长度的无帽（StrokeCap.Butt）短线条，剩余长段线条配置目标线帽。两段拼接后视觉上仅目标端有线帽，另一端无多余线帽。
• 适用场景：所有标准线帽（圆角Round、方头Square）需求，无需额外绘制其他图形。
• 示例代码：

Canvas(modifier = Modifier.fillMaxSize()) {
    val lineWidth = 20.dp.toPx()
    val startPoint = Offset(100f, 100f)
    val endPoint = Offset(300f, 100f)
    // 计算线条方向单位向量
    val lineVec = (endPoint - startPoint).normalize()
    // 绘制起点端无帽短线条
    drawLine(
        color = Color.Black,
        start = startPoint,
        end = startPoint + lineVec * lineWidth,
        strokeWidth = lineWidth,
        cap = StrokeCap.Butt
    )
    // 绘制剩余段，仅终点端显示线帽
    drawLine(
        color = Color.Black,
        start = startPoint + lineVec * lineWidth,
        end = endPoint,
        strokeWidth = lineWidth,
        cap = StrokeCap.Round
    )
}

方案2：手动绘制端点模拟线帽 #

• 核心逻辑：整根线条用无帽StrokeCap.Butt绘制，在需要添加线帽的端点，手动绘制对应形状的图形模拟线帽：圆角帽绘制直径等于线宽的圆形，方头帽绘制边长等于线宽的正方形，图形中心对齐端点即可。
• 适用场景：需要自定义两端不同线帽样式的场景，实现逻辑最简单无对齐误差。
• 示例代码：

Canvas(modifier = Modifier.fillMaxSize()) {
    val lineWidth = 20.dp.toPx()
    val startPoint = Offset(100f, 200f)
    val endPoint = Offset(300f, 200f)
    // 绘制无帽基础线条
    drawLine(
        color = Color.Black,
        start = startPoint,
        end = endPoint,
        strokeWidth = lineWidth,
        cap = StrokeCap.Butt
    )
    // 终点端绘制圆角线帽
    drawCircle(
        color = Color.Black,
        radius = lineWidth / 2,
        center = endPoint
    )
}

方案3：Path裁剪多余线帽 #

• 核心逻辑：先给整根线条配置目标线帽绘制完成后，通过clipRect或clipPath裁剪掉不需要线帽一端的超出部分，仅保留目标端的线帽。
• 适用场景：线条路径复杂、拆分拼接容易出现误差的场景。

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