web-dev-qa-db-fra.com

Sweep Gradient: Qu'est-ce que c'est et ses exemples

Je suis tombé sur Sweep Gradient sur Android et j'étais intrigué s'il pouvait me donner un meilleur contrôle sur l'espacement des couleurs et les transitions. A fait une recherche rapide et n'a presque rien trouvé à ce sujet !!

Les seules quelques références que j'ai trouvées (et elles ne répondent pas aux critères de se rapprocher même de l'expliquer correctement ou de manière exhaustive) sont répertoriées ci-dessous:

C'est donc presque à ce sujet. D'autres sont similaires ou d'une manière désobligeante.

Peu de conclusions que j'ai tirées jusqu'à présent (et peut-être que je me trompe):

  • Le gradient de balayage est principalement utilisé pour Anneaux
  • Ils sont utilisés pour des transactions similaires comme le balayage angulaire (pas sûr de celui-ci) qui parle de transaction similaire au balayage d'une aiguille d'horloge.
  • Très similaire à Gradients linéaires. La seule chose à laquelle je peux penser pour une différence entre eux est pour l'utilisation (comme les anneaux).
  • Sweep traite de Centre (encore une fois une référence forte vers la théorie de l'horloge)

Je connais des gens mai considère que ce n'est pas vraiment une question technique. Mais pour que je travaille avec des dégradés de balayage ou que je sache au moins ce qu'ils signifient, la description doit venir de quelque part. Et veuillez fournir les réponses avec quelques exemples d'utilisation du balayage dans des cas autres que les anneaux.

androiddrawablegradientsweepgradient
18
Kaushik NP

Le dégradé Word dans ce contexte (comme dans de nombreux éditeurs graphiques, y compris Photoshop) fait référence à une transition fluide entre plusieurs couleurs , par opposition à l'utilisation d'une seule couleur pour remplir une zone.

L'API Android Android propose 3 dégradés différents: LinearGradient, RadialGradient et SweepGradient.

Ce sont toutes des sous-classes de Shader. Vous pouvez définir un Shader sur un objet Paint, puis dessiner n'importe quelle forme avec ce Paint. La forme sera remplie de couleurs et de transitions entre elles, selon le type de dégradé.

Par exemple:

output image of the code below

Cette image peut être produite avec ce code:

Bitmap test = Bitmap.createBitmap(640, 200, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(test);
{ // draw a dark gray background
    Paint backgroundPaint = new Paint();
    backgroundPaint.setARGB(255, 24, 24, 24);
    c.drawPaint(backgroundPaint);
}
Path heart = new Path();
{ // prepare a heart shape
    heart.moveTo(110, 175);
    heart.lineTo(10, 75);
    RectF leftCircle = new RectF(10, 25, 110, 125);
    heart.arcTo(leftCircle, 180, 180);
    RectF rightCircle = new RectF(110, 25, 210, 125);
    heart.arcTo(rightCircle, 180, 180);
    heart.close();
}
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint.setTextSize(18f);
int[] colors = {
        0xFFFFFF88, // yellow
        0xFF0088FF, // blue
        0xFF000000, // black
        0xFFFFFF88  // yellow
};
float[] positions = {0.0f, 0.33f, 0.66f, 1.0f};
{ // draw the left heart
    SweepGradient sweepGradient;
    { // initialize the sweep gradient
        sweepGradient = new SweepGradient(50, 50, colors, positions);
        Paint.setShader(sweepGradient);
    }
    c.drawPath(heart, Paint);
    c.drawText("SweepGradient", 50, 190, Paint);
}
{ // draw the middle heart
    LinearGradient linearGradient;
    { // initialize a linear gradient
        linearGradient = new LinearGradient(250, 0, 350, 150, colors, positions, Shader.TileMode.CLAMP);
        Paint.setShader(linearGradient);
    }
    heart.offset(210, 0); // move the heart shape to the middle
    c.drawPath(heart, Paint);
    c.drawText("LinearGradient", 260, 190, Paint);
}
{ // draw the right heart
    RadialGradient radialGradient;
    { // initialize a linear gradient
        radialGradient = new RadialGradient(550, 50, 100, colors, positions, Shader.TileMode.CLAMP);
        Paint.setShader(radialGradient);
    }
    heart.offset(210, 0); // move the heart shape to the right
    c.drawPath(heart, Paint);
    c.drawText("RadialGradient", 470, 190, Paint);
}
{ // save the bitmap
    String filename = Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + "test.png";
    FileOutputStream out = null;
    try {
        out = new FileOutputStream(filename);
        test.compress(Bitmap.CompressFormat.PNG, 90, out);
    } catch (Exception e) {
    } finally {
        try {
            out.close();
        } catch (Exception e) {
        }
    }
}

  • Ainsi, le LinearGradient est Linear Gradient dans Photoshop, RadialGradient est Radial Gradient et SweepGradient est Angular Gradient, comme décrit dans votre 3ème référence. Je recommande d'abord de les essayer dans un éditeur d'images (tous les éditeurs d'images populaires ont ces outils), et vous aurez rapidement une idée de leur fonctionnement.

  • Vous pouvez également utiliser ces dégradés dans un dessinable XML (comme dans votre 4ème référence), avec une limitation d'utilisation de 3 couleurs maximum.

  • Dans un SweepGradient, lorsque vous fournissez des positions, le point 0,0 est à 3 heures, dans le sens horaire (avec 0,25 à 6 heures, 0,5 à 9 heures, 0,75 à 12 heures et 1.0 de retour à 3 heures).

À propos de vos conclusions:

  • Comme vous pouvez le voir, toute forme peut être dessinée avec un SweepGradient, pas seulement un anneau. Même les étiquettes sont dessinées avec les dégradés de l'exemple ci-dessus.
  • Oui, l'analogie de l'aiguille de l'horloge est parfaite.
  • En utilisation, SweepGradient est très similaire à LinearGradient, sauf que vous n'avez pas besoin de fournir un TileMode, car vous ne pouvez pas exécuter en dehors des limites de votre liste de couleurs.
  • Oui, vous devez fournir les coordonnées du point central.

J'espère que cela clarifie les choses.

27
Attila Tanyi

Pour xml dessinable cela peut être spécifié avec

Android:type="sweep"

Android: tapez peut avoir des valeurs(sensible aux majuscules et minuscules): linear, radial ou sweep

1
Prince