Jetpack Compose - 用圖案繪制弧線

Question

我希望在 Jetpack Compose 中的 canvas 上繪制一條弧線，並帶有如下圖所示的斜條紋圖案：

我希望將其用作進度條，因此可以根據完成的百分比對其進行擴展或縮短。 我目前有一個自定義的圓形進度條，我在 canvas 上為進度的空白部分畫一個圓圈，然后為完成的進度畫一個弧線。 然而，設計想要實現一個超額 state，其中，而不是純色，超額具有這種條紋圖案。

現在我的解決方法就是畫一個像這樣填充條紋的矩形，然后剪掉角落，然后在中間放一個白色圓圈，讓它看起來像一個環，然后在頂部覆蓋另一個進度條並去除純色根據需要反向顯示條紋。 然而，這並沒有給我太多的自由來處理超齡。 主要是彎曲的白色間隙變得難以完成，我只能做一個方形的角間隙。

所以我想用這種條紋圖案創建弧線。

Answer 1

您可以使用Brush.linearGradient實現這種條紋圖案。
這里的訣竅是使用“銳利”的色標。 所以我們將設置相同的 position 用於透明顏色應該停止的位置和條紋顏色應該開始的位置。

這允許創建一個有角度的線性漸變，在一個小正方形上看起來像這樣：

但是當使用TileMode.Repeated在更大的區域上使用時，它會很好地“循環”成所需的條紋圖案：

這是有關如何實現這種漸變的示例：

private fun Density.createStripeBrush(
    stripeColor: Color,
    stripeWidth: Dp,
    stripeToGapRatio: Float
): Brush {
    val stripeWidthPx = stripeWidth.toPx()
    val stripeGapWidthPx = stripeWidthPx / stripeToGapRatio
    val brushSizePx = stripeGapWidthPx + stripeWidthPx
    val stripeStart = stripeGapWidthPx / brushSizePx

    return Brush.linearGradient(
        stripeStart to Color.Transparent,
        stripeStart to stripeColor,
        start = Offset(0f, 0f),
        end = Offset(brushSizePx, brushSizePx),
        tileMode = TileMode.Repeated
    )
}

擁有這樣的Brush ，我們可以將它用於任何繪圖操作。
例如這里它在Modifier.drawWithCache中用於drawArc ，因此您可以完全自由地控制筆觸樣式等：

.drawWithCache {
    val brush = createStripeBrush(
        stripeColor = Color.Blue,
        stripeWidth = stripeWidth,
        stripeToGapRatio = 1.8f
    )
    onDrawWithContent {
        drawArc(
            brush = brush,
            startAngle = 0f,
            sweepAngle = -90f,
            useCenter = false,
            style = Stroke(width = strokeWidth, cap = StrokeCap.Round)
        )
    }
}

Answer 2

您的解決方案看起來正確。 要獲得圓形間隙，請嘗試使用圖像創建該間隙並將其圍繞圓圈旋轉。 間隙圖像的兩端都是圓形的。 圖像的內部是白色的，但外部是透明的 - 本質上是 png 或可能是 svg。

或者，創建一個圖像，其中有一個白色圓圈（您已經在使用的大圓圈），其邊緣有一個延伸的間隙，然后只需旋轉圓圈以使間隙出現在它應該出現的位置。