Bouton avec effects speciaux sur applet.

Version imprimable

21/01/2006, 06h49
argon

Bouton avec effects speciaux sur applet.

Bonjour tout le monde

Je souhaiterai réaliser un bouton rouge lumineux.

Est ce que c'est possible?

Merci

Cordialement

A bientôt
21/01/2006, 13h18
yakanet

Je pense que ca doit etre possible avec un Timer et une variation du background sur ton JButton (peut etre faire varier la couleur alpha) ca dépend ce que tu veux comme effet de lumineusité
21/01/2006, 19h16
argon

Bonsoir tout le monde

Je souhaite s'implement un effet de lumiere sur les boutons.

Merci

Cordialement

A bientôt
22/01/2006, 00h06
charaf

Salut
Tu peut utilisé le Gradienpaint pour avoir des couleurs lumineux sa t'aiderai beaucoup sur les effets couleur.
Pour plus d'information rend toi au FAQ, il y a plien de chose concernant ce sujet.
22/01/2006, 08h59
argon

Bonjour tout le monde

Je n'ai pas vue c'est info dans la faq.

Cordialement

A bientot
22/01/2006, 09h59
argon
Rebonjour tout le monde

J'ai fais ca pour la réalisation d'un bouton, il n'est pas fini.

Voici le code.
Code:

1 2 3 4 5 6 7 JButton B1; B1=new JButton("titi"); getContentPane().add(B1,c); SetVisible(true);
Comment faire l'effect.

Cordialement

A bientôt
22/01/2006, 14h39
charaf

c'est quoi "c" ?
22/01/2006, 19h11
yakanet

Ca doit-etre une icon c'est la seule possibilité
22/01/2006, 22h18
sinok

je dirais plutôt les contraintes afférentes au layout du contentpane

Sinon quand tu dis qu'il doit être lumineux ton bouton que veux tu exactement: qu'il clignote, qu'il soit plus clair selon l'état, qu'il ait une couleur lumineuse??????????

Essaye de clkarifier ton idée histoire que l'on puisse t'apporter une idée, car pour le moment ça t'apparait lumineux et clair commme de l'eau de roche pour toi, mais pour ceux qui te lisent pas trop

De toute façon la clef a une réponse correcte et rapide sur un forum est la clareté de l'énoncé en général
++
22/01/2006, 23h22
argon

Bonsoir tout le monde

Je vais essayer d'être plus clair, je veux faire des boutons de couleur rouge avec un effet de luminosité, cliquable.

Que l'on voi l'action du clique.

Est ce possible?

Merci

Cordialement

A bientôt
23/01/2006, 03h17
sinok

grosso modo, tu voudrais que la couleur du bouton varie selon l'endroit entre différentes teintes de rouge (le concept de luminosité est très flou) dans ce cas là il il va te falloir créer un classe héritant de JButton surchargeant la méthode paintComponent et remplissant ton bouton avec un GradientPaint (à toi de le configurer selon tes besoins, il existe pas mal de ressources sur le net à cet effet -- recherche sur google tuto GradientPaint)
Pour l'action du clique tu veux que la couleur du bouton change définitivement ou simplement lors du clic?
Dans le premier cas ce n'est plus un JButton mais un JToggleButton qu'il faudra utiliser, dans le deuxième cas un MouseListener (ou un MouseAdapter) sur le JButton suffira.
24/01/2006, 21h48
argon

Bonsoir tout le monde

Je rexeplique, je veux un bouton de couleur rouge, si possible qu'il rayonne comme une petit lampe.

J'espere que vous avez compris.

Merci.

Cordialement

A bientôt
25/01/2006, 00h58
sinok

qui aurait par exemple cette tête???

http://s.cabane.free.fr/Divers/GradientButton.png
25/01/2006, 06h39
argon

Bonjour tout le monde

Oui qui ressemble à ca.

Merci

Cordialement

A bientôt

Bon un peu de recherche sur le net sur un "circular gradient java" t'aurais amené a créer quelquechose dans le style (par contre avec ton "effet de lumière" tu serais pas allé loin, on a beau être des codeurs à la base, il faut au cas où avoir les bases du language de design :wink: )

Donc tout d'abord une classe héritant de PaintContext qui contiendra les opérations et transformations mathématiques nécessaires au gradient

Code:

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
 
import java.awt.Color;
import java.awt.PaintContext;
import java.awt.geom.Point2D;
import java.awt.image.ColorModel;
import java.awt.image.Raster;
import java.awt.image.WritableRaster;
 
/**
 * @author Sinok
 *
 */
public class RoundGradientContext implements PaintContext {
	  protected Point2D mPoint;
	  protected Point2D mRadius;
	  protected Color mC1, mC2;
	  public RoundGradientContext(Point2D p, Color c1, Point2D r, Color c2) {
	    mPoint = p;
	    mC1 = c1;
	    mRadius = r;
	    mC2 = c2;
	  }
 
	  public void dispose() {}
 
	  public ColorModel getColorModel() { return ColorModel.getRGBdefault(); }
 
	  public Raster getRaster(int x, int y, int w, int h) {
	    WritableRaster raster =
	        getColorModel().createCompatibleWritableRaster(w, h);
 
	    int[] data = new int[w * h * 4];
	    for (int j = 0; j < h; j++) {
	      for (int i = 0; i < w; i++) {
	        double distance = mPoint.distance(x + i, y + j);
	        double radius = mRadius.distance(0, 0);
	        double ratio = distance / radius;
	        if (ratio > 1.0)
	          ratio = 1.0;
 
	        int base = (j * w + i) * 4;
	        data[base + 0] = (int)(mC1.getRed() + ratio *
	            (mC2.getRed() - mC1.getRed()));
	        data[base + 1] = (int)(mC1.getGreen() + ratio *
	            (mC2.getGreen() - mC1.getGreen()));
	        data[base + 2] = (int)(mC1.getBlue() + ratio *
	            (mC2.getBlue() - mC1.getBlue()));
	        data[base + 3] = (int)(mC1.getAlpha() + ratio *
	            (mC2.getAlpha() - mC1.getAlpha()));
	      }
	    }
	    raster.setPixels(0, 0, w, h, data);
 
	    return raster;
	  }
}

Puis une class héritant de Paint prenant les couleurs et lançant les transformations nécessaires afin de créer le gradient en lui même

Code:

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
 
import java.awt.Color;
import java.awt.Paint;
import java.awt.PaintContext;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.geom.AffineTransform;
import java.awt.geom.Point2D;
import java.awt.geom.Rectangle2D;
import java.awt.image.ColorModel;
/**
 * 
 */
 
/**
 * @author Sinok
 *
 */
public class RoundGradientPaint implements Paint {
 
	  protected Point2D mPoint;
	  protected Point2D mRadius;
	  protected Color mPointColor, mBackgroundColor;
 
	  public RoundGradientPaint(double x, double y, Color pointColor,
	      Point2D radius, Color backgroundColor) {
	    if (radius.distance(0, 0) <= 0)
	      throw new IllegalArgumentException("Radius must be greater than 0.");
	    mPoint = new Point2D.Double(x, y);
	    mPointColor = pointColor;
	    mRadius = radius;
	    mBackgroundColor = backgroundColor;
	  }
 
	  public PaintContext createContext(ColorModel cm,
	      Rectangle deviceBounds, Rectangle2D userBounds,
	      AffineTransform xform, RenderingHints hints) {
	    Point2D transformedPoint = xform.transform(mPoint, null);
	    Point2D transformedRadius = xform.deltaTransform(mRadius, null);
	    return new RoundGradientContext(transformedPoint, mPointColor,
	        transformedRadius, mBackgroundColor);
	  }
 
	  public int getTransparency() {
	    int a1 = mPointColor.getAlpha();
	    int a2 = mBackgroundColor.getAlpha();
	    return (((a1 & a2) == 0xff) ? OPAQUE : TRANSLUCENT);
	  }
}

Enfin voila ton nouveau bouton héritant de JButton avec un exemple d'utilisation dans le main:

Code:

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
 
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.geom.Point2D;
 
import javax.swing.Icon;
import javax.swing.JButton;
import javax.swing.JFrame;
 
public class GradientButton extends JButton {
	private Color color1;
	private Color color2;
 
	public GradientButton() {
		this(Color.WHITE, Color.LIGHT_GRAY);
	}
 
	public GradientButton(Color c1, Color c2) {
		this.color1 = c1;
		this.color2 = c2;
		setContentAreaFilled(false);
		setFocusPainted(false);
	}
 
	public GradientButton(Color c1, Color c2,String text) {
		super(text);
		this.color1 = c1;
		this.color2 = c2;
		setContentAreaFilled(false);
		setFocusPainted(false);
	}
 
	public GradientButton(Color c1, Color c2,Icon icon) {
		super(icon);
		this.color1 = c1;
		this.color2 = c2;
		setContentAreaFilled(false);
		setFocusPainted(false);
	}
 
	public GradientButton(Color c1, Color c2, String text, Icon icon) {
		super(text,icon);
		this.color1 = c1;
		this.color2 = c2;
		setContentAreaFilled(false);
		setFocusPainted(false);
	}
 
	public void setColor1(Color c1) {
		this.color1 = c1;
		repaint();
	}
 
	public void setColor2(Color c2) {
		this.color2 = c2;
		repaint();
	}
 
//	 Overloaded in order to paint the background
	protected void paintComponent(Graphics g) {
        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
        int w = getWidth();
        int h = getHeight();
        RoundGradientPaint gradient = new RoundGradientPaint(w/2, h/2, color2, new Point2D.Double(w/2, h), color1);
        g2.setPaint(gradient);
        g2.fillRect(0, 0, w, h);
        super.paintComponent(g);
	}
 
	public static void main(String[] args) {
		JFrame f = new JFrame();
		f.setLayout(new BorderLayout());
		Color couleurInterieur = new Color(255,230,0);
		Color couleurExterieur = new Color(130,0,0); 
		GradientButton b = new GradientButton(couleurExterieur ,couleurInterieur,"machin");
		f.add(b,BorderLayout.CENTER);
		f.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
		f.pack();
		f.setVisible(true);		
	}
}

Voila qui devrait t'occuper
++

25/01/2006, 09h10
Gfx

Vous trouverez aussi de tres bons degrades dans le code source de Batik, le renderer SVG sous licence Apache. Il propose un degrade lineaire et un degrade circulaire mais qui acceptent tous les deux plus de deux couleurs.
06/02/2006, 14h07
franck06

j'ai pigé ce que tu veux faire
il te faut juste 2 images
tu lies la premiere image au bouton
lorsqu'on passe la souris (rollover) sur le bouton tu affiches la deuxieme
cherche sur les methodes rollover

ca prend 4 lignes, je l'ai deja fait et l'effet au final est pas mal si les images sont bien coordonnées
06/02/2006, 20h24
argon

Bonsoir tout le monde

Je crois que vais simplement mêttre les boutons en couleur.

Cordialement

A bientôt