Jetpack Compose - 用图案绘制直线

Question

我希望您能够在画布上绘制一个图案而不是颜色的线条。以下是我目前拥有的代码：

drawLine(
    color = progressColor,
    start = Offset(if (whiteGap) progressCapWidth else startOffsetBg, yOffset),
    end = Offset(endOffsetProgress, yOffset),
    strokeWidth = progressHeight.toPx(),
    cap = if (roundedCorners) StrokeCap.Round else StrokeCap.Butt,
)

这是自定义线性进度条的一部分。根据我收到的设计，他们希望进度具有这种模式：

这是具有此对角线图案进度的完整进度示例。是否可以使用可绘制对象并重复使用它，而不是使用颜色？在绘制线条时是否有直接应用/创建对角线白色间隙的方法？

我们正在使用Jetpack Compose实现整个功能，因此无法使用传统的XML进行操作。

- daniel-eh

Answer 1

以下是使用Canvas绘制它的方法：

Canvas(
    Modifier
        .padding(top = 100.dp)
        .border(1.dp,Color.Black)
        .padding(10.dp)
        .height(30.dp)
        .fillMaxWidth()
        .clip(CircleShape)
) {
    val step = 10.dp
    val angleDegrees = 45f
    val stepPx = step.toPx()
    val stepsCount = (size.width / stepPx).roundToInt()
    val actualStep = size.width / stepsCount
    val dotSize = Size(width = actualStep / 2, height = size.height * 2)
    for (i in -1..stepsCount) {
        val rect = Rect(
            offset = Offset(x = i * actualStep, y = (size.height - dotSize.height) / 2),
            size = dotSize,
        )
        rotate(angleDegrees, pivot = rect.center) {
            drawRect(
                Color.Blue,
                topLeft = rect.topLeft,
                size = rect.size,
            )
        }
    }
}

Result:

- Phil Dukhov