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 进行操作。

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,
            )
        }
    }
}

结果：