Android: zeichnen, Bogen in canvas-api mit einem Farbverlauf Farbe

Möchte ich einen Bogen zeichnen mit canvas mit einem Farbverlauf füllen. Wie können Sie diese erreichen?

InformationsquelleAutor Swapnil | 2012-01-12

10

Hey, ich habe dieses hier: Zeichnen Sie einen Bogen mit einem SweepGradient in Android

aber es funktioniert gut, ich habe eine LinearGradient statt.
```
Shader gradient = new SweepGradient (0,getMeasuredHeight()/2, Color.RED, Color.WHITE);
lightRed.setShader(gradient);
canvas.drawArc(rectf, -90, 360, false, lightRed);
```
- sollte hellrot nicht beleuchtet
- Danke! Bearbeitet die Korrektur
InformationsquelleAutor Quintin Balsdon

In meiner Sache ich die ich zu ziehen hatte, um jemanden wie diese:

Android: zeichnen, Bogen in canvas-api mit einem Farbverlauf Farbe

Vielleicht auch Sie.

Also, lasst uns denken!
Wie funktioniert die Sweep-Verlauf funktioniert?
Wenn Sie zeichnen ein Rechteck über diese:

     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)

werden:

Android: zeichnen, Bogen in canvas-api mit einem Farbverlauf Farbe

Also die Idee ist, es zu drehen!

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

Android: zeichnen, Bogen in canvas-api mit einem Farbverlauf Farbe

Schließlich können wir ziehen unsere arc:

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

Android: zeichnen, Bogen in canvas-api mit einem Farbverlauf Farbe

Siehe meine volle benutzerdefinierte Ansicht-Quellcode auf github repository.

InformationsquelleAutor Serg Burlaka

Können Sie auch ein array von Farben und Variablen Positionen.
Definieren Sie beispielsweise 10 Farben, je 10% Fortschritt:

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

Alle diese Farben innerhalb einer Farben "intArray" wie diese:

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

Dann, Positionen zu formulieren. Positionen sweep von 0.0 bis 1.0 (0.1 Positionen entspricht color_10, position 0,2 bis color_20 etc.)

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)

Haben wir einmal definierten Positionen, können wir die SweepGradient, um unsere Farbe

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

Schließlich können wir ziehen unsere arc mit unseren shader-Farbe:

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