Android - Comment dessiner un arc en fonction du gradient

Je suis en train de créer un arc (variable nombre de degrés) qui va progressivement d'une couleur à une autre. À partir de l'exemple du bleu au rouge:

C'est mon code:

SweepGradient shader = new SweepGradient(center.x, center.y, resources.getColor(R.color.startColor),resources.getColor(R.color.endColor));
Paint paint = new Paint()
paint.setStrokeWidth(1);
paint.setStrokeCap(Paint.Cap.FILL);
paint.setStyle(Paint.Style.FILL);
paint.setShader(shader);
canvas.drawArc(rectF, startAngle, sweepAngle, true, paint);

Mais le résultat est l'ensemble de l'arc est peint de la même couleur.

Edit:

Après plus d'expérimentation, j'ai trouvé que la couleur de la propagation est déterminé par l'angle de l'arc. Si je dessine un arc de cercle avec un petit angle, seule la première couleur est affichée. Plus l'angle, plus les couleurs sont tirées. Si l'angle est petit, il semble qu'il n'y a pas de gradient.
Ici est un exemple. Je suis de dessin 4 arcs - 90, 180, 270 et 360:

RectF rect1 = new RectF(50, 50, 150, 150);
Paint paint1 = new Paint();
paint1.setStrokeWidth(1);
paint1.setStrokeCap(Paint.Cap.SQUARE);
paint1.setStyle(Paint.Style.FILL);
SweepGradient gradient1 = new SweepGradient(100, 100,
Color.RED, Color.BLUE);
paint1.setShader(gradient1);
canvas.drawArc(rect1, 0, 90, true, paint1);
RectF rect2 = new RectF(200, 50, 300, 150);
Paint paint2 = new Paint();
paint2.setStrokeWidth(1);
paint2.setStrokeCap(Paint.Cap.SQUARE);
paint2.setStyle(Paint.Style.FILL);
SweepGradient gradient2 = new SweepGradient(250, 100,
Color.RED, Color.BLUE);
paint2.setShader(gradient2);
canvas.drawArc(rect2, 0, 180, true, paint2);
RectF rect3 = new RectF(50, 200, 150, 300);
Paint paint3 = new Paint();
paint3.setStrokeWidth(1);
paint3.setStrokeCap(Paint.Cap.SQUARE);
paint3.setStyle(Paint.Style.FILL);
SweepGradient gradient3 = new SweepGradient(100, 250,
Color.RED, Color.BLUE);
paint3.setShader(gradient3);
canvas.drawArc(rect3, 0, 270, true, paint3);
RectF rect4 = new RectF(200, 200, 300, 300);
Paint paint4 = new Paint();
paint4.setStrokeWidth(1);
paint4.setStrokeCap(Paint.Cap.SQUARE);
paint4.setStyle(Paint.Style.FILL);
SweepGradient gradient4 = new SweepGradient(250, 250,
Color.RED, Color.BLUE);
paint4.setShader(gradient4);
canvas.drawArc(rect4, 0, 360, true, paint4);

Et voici le résultat:

Android - Comment dessiner un arc en fonction du gradient

Ce qui est surprenant, parce que je m'attends à de la ROUGE pour être au départ de l'arc, le BLEU à la fin et enything entre être réparties uniformément quel que soit l'angle.

J'ai essayé de l'espace, les couleurs manuellement en utilisant les positions paramètre, mais les résultats ont été les mêmes:

int[] colors = {Color.RED, Color.BLUE};
float[] positions = {0,1};
SweepGradient gradient = new SweepGradient(100, 100, colors , positions);

Une idée de comment résoudre ce problème?

InformationsquelleAutor Yoav | 2012-01-27

2d android geometric-arc graphics

30

La solution pour cela est de définir la position de BLEU. C'est fait comme suit:
```
int[] colors = {Color.RED, Color.BLUE};
float[] positions = {0,1};
SweepGradient gradient = new SweepGradient(100, 100, colors , positions);
```
Le problème ici est que lors de la définition de la position de BLEU à '1' cela ne signifie pas qu'il sera placé à la fin de l'arc dessiné, mais plutôt à la fin du cercle de l'arc est une partie de.
Pour résoudre ce problème, BLEU position doit prendre en compte le nombre de degrés dans l'arc. Donc, si je dessine un arc de X degrés, la position sera définie comme suit:
```
float[] positions = {0,Xf/360f};
```
Donc, si X est 90, le gradient de la place du BLEU à 0,25 du cercle:
- Au moins sur Android 4.2, la solution donnée ne fonctionne pas. Il est nécessaire d'avoir une valeur de 1 à la fin du tableau. Quelque chose comme ceci: int[] couleurs = {Couleur.ROUGE, la Couleur.BLEU, la Couleur.BLUE}; float[] positions = {0, Xf/360f, 1};
- Savez-vous pourquoi la résolution est si mauvais, si l'angle est très petit? comme un arc largeur de 10 degré signifie seulement 3 couleurs. Vous pouvez voir les étapes dans votre capture d'écran dans le topleft gâteau
InformationsquelleAutor Yoav
11

À ajouter à Yoav la solution.

Sur mon Galaxy Nexus 4.2 stock Android, la solution proposée ne fonctionne pas.

Si le tableau ne contient pas d'0.0 f, 1.0 f, il semble être ignorée.

Ma solution finale était:
```
int[] colors = {Color.RED, Color.BLUE, Color.RED}; 
float[] positions = {0, Xf/360f, 1};
```
InformationsquelleAutor Tom anMoney
1

cinq ans plus tard, mais de la bonne façon, c'est de faire 0.749 f avec 0.750 f de la ligne séparée, code simple, c'est comme:
```
    val colors = intArrayOf(0xffff0000.toInt(), 0xff0000ff.toInt(), 0xffff0000.toInt(), 0xffff0000.toInt())
val positions = floatArrayOf(0.0f, 0.749f, 0.750f, 1.0f)
```
- merci pour l'affichage de Kotlin
InformationsquelleAutor zmj110

Vous devez vous connecter pour publier un commentaire.