如何在Jetpack Compose中不使用Canvas绘制两点间倾斜直线

存在完全不依赖Canvas、drawBehind、drawWithContent等绘制API的实现方案，核心依托Compose布局系统的几何变换能力即可完成，适配绝大多数交互、样式需求，以下是可直接落地的实现路径：

方案1：基础组件+几何修饰符实现（最轻量，适用绝大多数场景） #

直线本质是固定尺寸的细长矩形，只需要提前计算两点间的直线长度、倾斜角度，再通过修饰符控制矩形的位置、旋转角度即可精准对齐A、B两点。

• 第一步：计算直线核心参数

import kotlin.math.pow
import kotlin.math.sqrt
import kotlin.math.atan2
import androidx.compose.ui.geometry.Offset

// 传入A、B两点相对于父布局的Offset坐标
fun calculateLineParams(pointA: Offset, pointB: Offset): Pair<Float, Float> {
    // 计算两点间距，即直线的总长度
    val lineLength = sqrt(
        (pointB.x - pointA.x).pow(2) + (pointB.y - pointA.y).pow(2)
    )
    // 计算直线倾斜角度（弧度转角度，供旋转修饰符使用）
    val tiltAngle = atan2(
        y = pointB.y - pointA.y,
        x = pointB.x - pointA.x
    ) * 180 / PI.toFloat()
    return Pair(lineLength, tiltAngle)
}

• 第二步：组件实现

import androidx.compose.foundation.background
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.draw.rotate
import kotlin.math.roundToInt
import androidx.compose.ui.graphics.Color
import androidx.compose.foundation.layout.Box
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.Composable

// 传入计算好的A点坐标、直线长度、倾斜角度
@Composable
fun TiltLine(
    pointA: Offset,
    lineLength: Float,
    tiltAngle: Float,
    lineWidth: Float = 2f,
    lineColor: Color = Color.Black
) {
    Box(
        modifier = Modifier
            // 先将组件的锚点移到A点位置
            .offset { IntOffset(pointA.x.roundToInt(), pointA.y.roundToInt()) }
            // 绕锚点旋转对应倾斜角度
            .rotate(tiltAngle)
            // 设置直线尺寸
            .width(lineLength.dp)
            .height(lineWidth.dp)
            // 配置直线样式，支持传Shape实现圆角、传Brush实现渐变
            .background(lineColor)
    )
}

如果需要实现直线的移动、角度变化、长度变化动画，建议将位移、旋转逻辑放到graphicsLayer修饰符中实现，避免动画过程中触发频繁重测，性能表现更好。

方案2：自定义Layout实现（适用于端点绑定其他组件的场景） #

如果你的直线两个端点不是固定坐标，而是要绑定页面上其他两个可组合项的位置（比如连接两个卡片的指引线、流程节点连线），可以直接自定义Layout组件：

• 在测量阶段拿到两个端点对应组件的位置、尺寸信息
• 自动计算直线的长度、角度、摆放位置
• 直线本身依然用基础Box实现，通过placeRelative结合旋转参数摆放即可
  这种方案不需要手动传递坐标，当端点组件位置发生变化（比如软键盘弹出、列表滚动、布局重排）时，直线会自动跟随调整位置，不需要额外写监听逻辑。

方案3：Divider组件实现（语义化场景适用） #

如果你的直线不需要渐变、自定义形状等特殊样式，可以直接把方案1里的Box替换为Compose自带的Divider组件，Divider本身内置了粗细、颜色配置参数，语义更贴合普通分割线、直线的使用场景，实现逻辑和方案1完全一致，能减少部分样式配置代码。

以上所有方案都完全脱离Canvas绘制体系，支持Compose所有标准修饰符能力：可以直接给直线加点击事件、涟漪效果、阴影、出入场动画，不需要处理Canvas绘制下的手势坐标映射、动画状态联动问题，适配成本比自定义Canvas绘制更低。

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