[Dessin] Dégradé sur JPanel

**Piolet** · 26/10/2007, 20h36

Bonjour,

alors le pb n'est pas aussi simple que le titre, car en soit un dégradé, je sais faire

j'aimerais en fait donner un effet a mon JPanel avec notamment un dégradé un peu complexe

imaginons mon JPanel et sa diagonale d1 (haut-gauche vers bas-droite), et bien le dégradé devrait par exemple dans le coin bas gauche etre d'une couleur c1, a l'approche de la diagonale d1, passer a la couleur c2, puis en se dirigeant vers le coin haut droit repasser a la couleur c1...

avec un gradient, ca, deja comment je fais ?

ensuite ca se complique un peu.

imaginons que je veuille que l'une de mes couleurs, c1 par exemple, soit transparente, c'est à dire que mon JPanel ainsi modifié soit ajouté dans un container plus complexe, lui meme ayant ses propres couleurs...

peut-on faire en sorte que le dégradé agisse sur la transparence de mon JPanel ?

voila...si c'est pas clair...bah demandez moi...bref...demandez moi...ou alors proposez une solution

merci d'avance

**bouye** · 28/10/2007, 23h12

Envoyé par Piolet

Bonjour,
imaginons mon JPanel et sa diagonale d1 (haut-gauche vers bas-droite), et bien le dégradé devrait par exemple dans le coin bas gauche etre d'une couleur c1, a l'approche de la diagonale d1, passer a la couleur c2, puis en se dirigeant vers le coin haut droit repasser a la couleur c1...

avec un gradient, ca, deja comment je fais ?

Aucun probeme, il te suffit de creer un gradient suivant... une ligne perpendiculaire a cette diagonale en son milieu (sa mediatrice). Il te faudra utiliser le LinearGradientPaint (Java 1.6+) qui supporte plusieurs couleurs contrairement au GradientPaint (Java 1.2~1.5).

Ton gradient sera constitue de 3 couleurs c1, c2, c1 avec un positionnement relatif de 0f, 0.5f et 1f en suivant les points d'intersection de la perpendiculaire avec les bords du panel.

Note : il te faudra mettre un ComponentListener sur ce panel qui a chaque fois que le panel change de taile (et donc que sa diagonale change) creee un nouveau gradient en utilisant les nouveaux points pour la diagonale (les couleurs et le positionnement relatif restant les memes).

Attention avec cette methode, a moins d'avoir un carre, les coins bas gauche et haut droit ne sont pas les points de depart et de fin du gradient (le gradient ne serait pas // a la diagonale au centre si on faisait ca). Comment faire alors ?? Une idee (a verifier) est d'utiliser une transformation affine pour changer le repere de maniere a ce qu'on ai un carre, de peindre un carre avec le gradient et d'annuler la transformation (je fais quelques essais et je reposte apres).

imaginons que je veuille que l'une de mes couleurs, c1 par exemple, soit transparente, c'est à dire que mon JPanel ainsi modifié soit ajouté dans un container plus complexe, lui meme ayant ses propres couleurs...

peut-on faire en sorte que le dégradé agisse sur la transparence de mon JPanel ?

En utilisant une couleur transparente ???? Tout simplement.
Dans ce cas tu ne dois le declarer en non-opaque avec un setOpaque(false) dans son constructeur par exemple.

**Piolet** · 28/10/2007, 23h21

Envoyé par bouye

Aucun probeme, il te suffit de creer un gradient suivant... une ligne perpendiculaire a cette diagonale en son milieu (sa mediatrice). Il te faudra utiliser le LinearGradientPaint (Java 1.6+) qui supporte plusieurs couleurs contrairement au GradientPaint (Java 1.2~1.5).

Ton gradient sera constitue de 3 couleurs c1, c2, c1 avec un positionnement relatif de 0f, 0.5f et 1f en suivant les points d'intersection de la perpendiculaire avec les bords du panel.

Note : il te faudra mettre un ComponentListener sur ce panel qui a chaque fois que le panel change de taile (et donc que sa diagonale change) creee un nouveau gradient en utilisant les nouveaux points pour la diagonale (les couleurs et le positionnement relatif restant les memes).

En utilisant une couleur transparente ???? Tout simplement.
Dans ce cas tu ne dois le declarer en non-opaque avec un setOpaque(false) dans son constructeur par exemple.

alors...nickel ta reponse..seul(s) hic(s)

c'est que je suis bloqué en 1.5

donc pas de 1.6
ensuite pour la couleur transparente, j'ai créer une couleur comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
Color transparent = new Color(0, 0, 0, 0);

mais quand je fais mon degradé, bah impossible de voir le panel du dessous, meme avec un setOpaque a false, ca reste ..."gris"

t'as deja essayé ?

**bouye** · 28/10/2007, 23h40

Voila un petit exemple avec la transformation affine qui fait que le gradient est bien // a la diagonale au centre, mais trouve ses extremites dans le coin du panel + gestion de la transparence.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/**
 * 
 */
package test;
 
import java.awt.*;
import java.awt.event.*;
 
import javax.swing.*;
 
/**
 * @author fabriceb
 *
 */
public class DiagonalGradientPanel extends JPanel {
	enum Flavor {
		OPAQUE, NON_OPAQUE;
	}
 
	int side = 25;
 
	LinearGradientPaint gradient;
 
	public DiagonalGradientPanel(Flavor flavor) {
		switch (flavor) {
			case NON_OPAQUE: {
				gradient = new LinearGradientPaint(new Point(0, side), new Point(side, 0), new float[] { 0f, 0.5f, 1f }, new Color[] { new Color(0, 255, 255, 0), Color.BLUE, new Color(0, 255, 255, 0) });
				setOpaque(false);
			}
				break;
			case OPAQUE:
			default: {
				gradient = new LinearGradientPaint(new Point(0, side), new Point(side, 0), new float[] { 0f, 0.5f, 1f }, new Color[] { Color.CYAN, Color.BLUE, Color.CYAN });
			}
		}
	}
 
	/** {@inheritDoc}
         */
	@Override protected void paintComponent(Graphics graphics) {
		Dimension size = getSize();
		Insets insets = getInsets();
		int width = size.width - (insets.left + insets.right);
		int height = size.height - (insets.top + insets.bottom);
		if ((width > 0) && (height > 0)) {
			Graphics2D g2d = (Graphics2D) graphics.create();
			try {
				double sx = width / (double) side;
				double sy = height / (double) side;
				g2d.setPaint(gradient);
				g2d.scale(sx, sy);
				g2d.fillRect(0, 0, side, side);
			}
			finally {
				g2d.dispose();
			}
		}
	}
 
	/** Self-test main.
         * @param args Arguments from the command-line.
         * @throws Exception In case of error.
         */
	public static void main(String... args) throws Exception {
		System.out.println(System.getProperty("java.version"));
		try {
			UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
		}
		catch (Exception e) {
			e.printStackTrace();
		}
		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				DiagonalGradientPanel diag1 = new DiagonalGradientPanel(Flavor.OPAQUE);
				DiagonalGradientPanel diag2 = new DiagonalGradientPanel(Flavor.NON_OPAQUE);
				JFrame frame = new JFrame("Test ");
				frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
				frame.setLayout(new BoxLayout(frame.getContentPane(), BoxLayout.Y_AXIS));
				frame.add(diag1);
				frame.add(diag2);
				frame.setSize(700, 700);
				frame.setLocationRelativeTo(null);
				frame.setVisible(true);
			}
		});
	}
}

**bouye** · 28/10/2007, 23h43

Tu peux essayer de ne PAS appeler super.paintComponent() dans la surcharge de paintComponent().

Ouch avec Java 5 uniquement ca a effectivement etre plus complique, il va falloir :

- ou utiliser deux gradients et faire les bons calculs, remplissage des bonnes formes pour que les deux se collent bien bout a bout. Logiquement en partant du rectangle forme par ton panel, tu peux facilement creer deux triangles rectangles que tu rempli chacun avec le bon gradient. MAIS bon... encore faut-il que le rendu apparaisse correctement apres (c'est-a-dire sans fine ligne grise/transparente entre les deux formes).

- ou trouver sur le net un multigradient compatible avec Java 5 (ca doit exister je pense) ou le faire toi-meme.

**Piolet** · 29/10/2007, 00h26

mais euh ca a pas l'air de marcher
meme avec un gradient simple...

mon panel reste tout rouge :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
@Override
public void paintComponent(Graphics g) {
   Graphics2D g2d = (Graphics2D) g;
   Rectangle bounds = this.getBounds();
   Dimension size = getSize();
   Insets insets = getInsets();
   int width = size.width - (insets.left + insets.right);
   int height = size.height - (insets.top + insets.bottom);
   if ((width > 0) && (height > 0)) {
      Graphics2D g2 = (Graphics2D) g.create();
      GradientPaint gradient = new GradientPaint(0, 0, Color.RED, bounds.width / 2, bounds.height / 2, JGroupPane.TRANSPARENT_COLOR);
      try {
         double sx = width / (double) 25;
         double sy = height / (double) 25;
         g2.setPaint(gradient);
         g2.scale(sx, sy);
         g2.fillRect(0, 0, 25, 25);
      } finally {
         g2.dispose();
      }   
...
}

le degradé ne passe pas

**Piolet** · 29/10/2007, 00h34

non je retire ce que je viens d'ecrire
en mettant sur le graphics2d principal ca passe mieux...et avec la couleur transparente aussi...reste plus qu'a faire l'histoire de la diagonale et hop

merki bcp

**Piolet** · 29/10/2007, 00h59

oué par contre....l'est un peu tard pour que je comprenne le principe du gradient et faire la diagonale, voila ce que j'ai mis mais ca deconne un peu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
	public void paintComponent(Graphics g) {
this._secondColor != null) {
			Graphics2D g2d = (Graphics2D) g;
			Rectangle bounds = this.getBounds();
 
			GradientPaint gradient = new GradientPaint(0, 5, Color.BLUE, 0, 0, JGroupPane.TRANSPARENT_COLOR);
			g2d.fillPolygon(new int[] {0, bounds.width, 0}, new int[] {5, bounds.height, bounds.height}, 3);
			gradient = new GradientPaint(bounds.width / 2, (bounds.height - 5) / 2, Color.RED, bounds.width, 5, JGroupPane.TRANSPARENT_COLOR);
			g2d.setPaint(gradient);
			g2d.fillPolygon(new int[] {0, bounds.width, bounds.width}, new int[] {5, 5, bounds.height}, 3);
}

premier problème, j'ai du mal a déterminer les coordonnées des points pour faire en sorte que le ou les gradients s'appliquent sur la diagonale haut-gauche / bas-droite

ensuite, c'est ptet lié au 1er point, mais le gradient bleu est tout sombre (dans tout le triangle)

voila...si y a une solution rapide, je suis preneur

**bouye** · 29/10/2007, 01h22

Voila en fait, une seul gradient suffit quand on double le dessin d'une autre transformation affine (une rotation a 180° autour du centre du rectangle)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
/**
 * 
 */
package test;
 
import java.awt.*;
import java.awt.geom.*;
import java.awt.event.*;
 
import javax.swing.*;
 
/**
 * @author fabriceb
 *
 */
public class DiagonalGradientPanel extends JPanel {
	enum Flavor {
		OPAQUE, NON_OPAQUE;
	}
 
	int side = 25;
	GeneralPath triangle;
	Paint gradient;
 
	public DiagonalGradientPanel(Flavor flavor) {
		triangle = new GeneralPath();
		triangle.moveTo(0,0);
		triangle.lineTo(side, 0);
		triangle.lineTo(side, side);
		triangle.closePath();
		switch (flavor) {
			case NON_OPAQUE: {
				//gradient = new LinearGradientPaint(new Point(0, side), new Point(side, 0), new float[] { 0f, 0.5f, 1f }, new Color[] { new Color(0, 255, 255, 0), Color.BLUE, new Color(0, 255, 255, 0) });
			  gradient = new GradientPaint(side/2f, side/2f, Color.BLUE, side, 0, new Color(0, 255, 255, 0));
				setOpaque(false);
			}
				break;
			case OPAQUE:
			default: {
				//gradient = new LinearGradientPaint(new Point(0, side), new Point(side, 0), new float[] { 0f, 0.5f, 1f }, new Color[] { Color.CYAN, Color.BLUE, Color.CYAN });
			  gradient = new GradientPaint(side/2f, side/2f, Color.BLUE, side, 0, Color.CYAN);
			}
		}
	}
 
	/** {@inheritDoc}
         */
	@Override protected void paintComponent(Graphics graphics) {
		/*
		Dimension size = getSize();
		Insets insets = getInsets();
		int width = size.width - (insets.left + insets.right);
		int height = size.height - (insets.top + insets.bottom);
		if ((width > 0) && (height > 0)) {
			Graphics2D g2d = (Graphics2D) graphics.create();
			try {
				double sx = width / (double) side;
				double sy = height / (double) side;
				g2d.setPaint(gradient);
				g2d.scale(sx, sy);
				g2d.fillRect(0, 0, side, side);
			}
			finally {
				g2d.dispose();
			}
		}
		*/
		Dimension size = getSize();
		Insets insets = getInsets();
		int width = size.width - (insets.left + insets.right);
		int height = size.height - (insets.top + insets.bottom);
		Graphics2D g2d = (Graphics2D) graphics.create();
		try {
			double sx = width / (double) side;
			double sy = height / (double) side;						
			g2d.setPaint(gradient);
			g2d.scale(sx, sy);
		  g2d.fill(triangle);
		  AffineTransform transform = AffineTransform.getRotateInstance(Math.PI, side/2d, side/2d);
		  g2d.transform(transform);
		  g2d.fill(triangle);
		}
		finally {
			g2d.dispose();
		}
	}
 
	/** Self-test main.
         * @param args Arguments from the command-line.
         * @throws Exception In case of error.
         */
	public static void main(String... args) throws Exception {
		System.out.println(System.getProperty("java.version"));
		try {
			UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
		}
		catch (Exception e) {
			e.printStackTrace();
		}
		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				DiagonalGradientPanel diag1 = new DiagonalGradientPanel(Flavor.OPAQUE);
				DiagonalGradientPanel diag2 = new DiagonalGradientPanel(Flavor.NON_OPAQUE);
				JFrame frame = new JFrame("Test ");
				frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
				frame.setLayout(new BoxLayout(frame.getContentPane(), BoxLayout.Y_AXIS));
				frame.add(diag1);
				frame.add(diag2);
				frame.setSize(700, 700);
				frame.setLocationRelativeTo(null);
				frame.setVisible(true);
			}
		});
	}
}

[Dessin] Dégradé sur JPanel

2D Java

Vue hybride

Discussions similaires

Partager

Partager