android - Jetpack Compose - 用图案绘制弧线

Question

我希望在 Jetpack Compose 的 Canvas 上绘制一条弧线，并带有如下图所示的斜条纹图案:

我希望将其用作进度条，因此可以根据完成的百分比对其进行扩展或缩短。我目前有一个自定义的圆形进度条，我在 Canvas 上为进度的空白部分绘制一个圆圈，然后为完成的进度绘制一个弧线。然而，设计想要实现一种超龄状态，而不是纯色，超龄具有这种条纹图案。
现在我的解决方法就是画一个像这样填充条纹的矩形，然后剪掉角落，然后在中间放一个白色圆圈，让它看起来像一个环，然后在顶部覆盖另一个进度条并去除纯色根据需要反向显示条纹。然而，这并没有给我太多的自由来处理超龄。主要是弯曲的白色间隙变得难以完成，我只能做一个方形的角间隙。
所以我想用这种条纹图案创建弧线。

Answer 1

您可以使用 Brush.linearGradient 来实现这种条纹图案。 .
这里的诀窍是使用“锐利”的色标。因此，我们将为透明颜色应该停止的位置和条纹颜色应该开始的位置设置相同的位置。
这允许创建一个有角度的线性渐变，在一个小正方形上看起来像这样:

但是当使用 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)
        )
    }
}