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

它是自定義線性進度條的一部分。 根據我給出的設計，他們希望進度具有這種模式：

這是這種對角線模式進步的全面進步的一個例子。 是否可以使用 drawable 並重復它而不是顏色？ 有沒有辦法在繪制線條時直接應用/創建對角白色間隙？

我們正在使用 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(angle, pivot = rect.center) {
            drawRect(
                Color.Blue,
                topLeft = rect.topLeft,
                size = rect.size,
            )
        }
    }
}

結果：