Android：使用渐变填充颜色在画布 api 中绘制弧线答案

【问题标题】：Android: draw arc within canvas api with a gradient fill colorAndroid：使用渐变填充颜色在画布 api 中绘制弧线
【发布时间】：2012-02-08 11:48:02
【问题描述】：

我想通过使用渐变填充的画布绘制弧线。如何做到这一点？

【问题讨论】：

标签： android android-canvas gradient android-gui geometric-arc

【解决方案1】：

嘿，我从这里偷了这个：Draw an arc with a SweepGradient in Android

但效果很好，我使用了 LinearGradient。

Shader gradient = new SweepGradient (0,getMeasuredHeight()/2, Color.RED, Color.WHITE);
lightRed.setShader(gradient);
canvas.drawArc(rectf, -90, 360, false, lightRed);

【讨论】：

应该是浅红色不亮

【解决方案2】：

在我的事业中，我不得不画这样的人：

也许你也是。

那么，让我们想想吧！扫描渐变如何工作？如果你通过这个绘制矩形：

     private val colors = intArrayOf(ContextCompat.getColor(context, R.color.progress_from_color),
 ContextCompat.getColor(context, R.color.progress_to_color))

    private var positions = floatArrayOf(0.0f, 1.0f)
    private var sweepGradient : SweepGradient? = null

    sweepGradient = SweepGradient(w / 2F,h / 2F,colors,  positions)

将是：

所以想法是旋转它！

 sweepGradient.apply {
            val rotate = 270f
            val gradientMatrix = Matrix()
            gradientMatrix.preRotate(rotate, mWidth / 2F, mHeight / 2F)
            setLocalMatrix(gradientMatrix)
        }

终于可以画出我们的弧线了：

 mPaint.shader = gradient
 canvas.drawArc(rectF, startAngle, finishedSweepAngle, false, mPaint)

在 github repository 上查看我的完整 custom view source code。

【讨论】：

【解决方案3】：

您还可以使用一组颜色和可变位置。例如，定义 10 种颜色，每 10% 进度一种：

<color name="color_0">#3C3C3F41</color>
<color name="color_10">#1AFF2323</color>
<color name="color_20">#33FF2323</color>
<color name="color_30">#4DFF2323</color>
<color name="color_40">#66FF2323</color>
<color name="color_50">#80FF2323</color>
<color name="color_60">#99FF2323</color>
<color name="color_70">#B3FF2323</color>
<color name="color_80">#CCFF2323</color>
<color name="color_90">#E6FF2323</color>
<color name="color_100">#FFFF2323</color>

将所有这些颜色放入一个 colors intArray 中，如下所示：

var colors = intArrayOf(
            ContextCompat.getColor(context, R.color.color_0),
            ContextCompat.getColor(context, R.color.color_10),
            ContextCompat.getColor(context, R.color.color_20),
            ContextCompat.getColor(context, R.color.color_30),
            ContextCompat.getColor(context, R.color.color_40),
            ContextCompat.getColor(context, R.color.color_50),
            ContextCompat.getColor(context, R.color.color_60),
            ContextCompat.getColor(context, R.color.color_70),
            ContextCompat.getColor(context, R.color.color_80),
            ContextCompat.getColor(context, R.color.color_90),
            ContextCompat.getColor(context, R.color.color_100)
        )

然后，定义位置。位置从 0.0 扫描到 1.0（位置 0.1 对应 color_10，位置 0.2 对应 color_20 等）

var positions = floatArrayOf(0.0f, 0.1f, 0.2f, 0.3f, 0.4f, 0.5f, 0.6f, 0.7f, 0.8f, 0.9f, 1.0f)

一旦我们定义了位置，我们就可以将 SweepGradient 设置为我们的绘画

Shader gradient = new SweepGradient (0,getMeasuredHeight()/2, colors, positions);
lightRed.setShader(gradient);

最后我们可以用着色器绘制弧线了：

 canvas.drawArc(rectf, -90, 360, false, lightRed);

我的自定义视图中的最终效果：

【讨论】：