Bouton/Panel de forme irrégulière

Version imprimable

26/09/2006, 14h08
bandit boy

Bouton/Panel de forme irrégulière

Bonjour à tous,

Je souhaiterais savoir s'il existe une méthode ou une astuce pour faire un bouton, un Panel ou autre permettant de dessiner une forme irrégulière et de détecter un déplacement de la souris dans cette zone non rectangulaire.

Toute idée est bonne à prendre en compte, je suis à votre écoute.
Merci d'avance.
26/09/2006, 16h14
Pasqualini
Pour créee une "Form" de forme rectangulaire avec des bord arrondis :
Code:

1 2 3 4 hRGN = CreateRoundRectRgn(0, 0, Width, Height, EllipseLargeur, EllipseHauteur); if(hRGN != NULL) SetWindowRgn(Handle, hRGN, TRUE);
Pour ne From elliptique :
Code:

1 2 3 4 hRGN = CreateEllipticRgn(x0, y0, xf, yf); if(hRGN != NULL) SetWindowRgn(Handle, hRGN, TRUE);
Il est possible d'assembler plusieurs régions pour n'en faire qu'une seule, et dessiner n'importe quel type de région finale.
26/09/2006, 16h45
blondelle

Salut bandit boy
Si on suppose que ta forme quelconque est dessinee par une formule mathematique, il doit etre possible par calcul de savoir si on est dans l'aire de cette forme.
26/09/2006, 16h46
bandit boy

Merci, c'est sympa,
mais c'est pas la Form mais plutôt un composant qui se trouvera sur un Form que je souhaite modifier.

Il existe aussi un moyen de rendre transparent certains pixel de la Form et du coup lui donner la forme que l'on souhaite. Mais cette méthode est-elle adaptable pour un bouton ou un Panel ?
26/09/2006, 18h35
blondelle

bandit boy a ecrit:

Citation:

Merci, c'est sympa,
mais c'est pas la Form mais plutôt un composant qui se trouvera sur un Form que je souhaite modifier.

Il existe aussi un moyen de rendre transparent certains pixel de la Form et du coup lui donner la forme que l'on souhaite. Mais cette méthode est-elle adaptable pour un bouton ou un Panel ?

Il y a eut un post resolu il y a quelque temps ou un bouton etait represente par une image.
J'ai retrouve le lien

Citation:

http://www.developpez.net/forums/sho...d.php?t=177312
26/09/2006, 20h55
blondelle

Est ce que l'on pourrait imaginer une image qui s'inscrit dans une forme de base, carre, rectangle, triangle ..., cette image pourrait avoir des pixels transparents, pour les testes au passage de la souris ils se feraient sur les formes de base, ce qui simplifiraient les testes, et seraient peu perceptibles a l'ecran.
27/09/2006, 09h17
bandit boy

Le truc c'est que ca reste carré, ou rectangulaire tout ca.
Je continue de chercher dans cette piste. Je fouille du côté de l'image avec pixel transparent.
27/09/2006, 10h26
blondelle

Salut motard.
Juste une idee comme cela est il possible de faire une detection sur des pixels uniquement si ils ne sont pas transparents, je m'explique tu te defini une zone non visuelle carre, ronde, rectangulaire, ...a partir de cette zone tu fait un teste pour savoir si tu est sur ton image ou non pour visualiser la selection il suffit de changer l'image par une image identique avec un fond different ou une bordure ...
27/09/2006, 17h49
bandit boy

Alors j'ai testé l'image avec la transparence et ca ne marche pas.

-Lorsque l'image est vide au départ et que je charge mon image avec la transparence, elle ne se fait pas.
-Si je charge un fond, j'obtiens ma transparence mais perd le fait d'obtenir un MouseMoove dans la zone dessiné.
-Si je dessine dans une zone qui n'est pas initialisé (le Strech = false et l'image inséré plus petite que le Timage) le dessin sensé être transparent ne s'affiche que dans la zone initialisée.
-Si je l'insère dans une zone non initialisé je ne le vois pas.

En gros, ca n'avance pas.

L'idéale serait en fait un Shape de forme personalisée, mais comment la modifier pour donner mon propre polygone?
27/09/2006, 19h05
blondelle

bandit boy a ecrit:

Citation:

Alors j'ai testé l'image avec la transparence et ca ne marche pas.

-Lorsque l'image est vide au départ et que je charge mon image avec la transparence, elle ne se fait pas.
-Si je charge un fond, j'obtiens ma transparence mais perd le fait d'obtenir un MouseMoove dans la zone dessiné.
-Si je dessine dans une zone qui n'est pas initialisé (le Strech = false et l'image inséré plus petite que le Timage) le dessin sensé être transparent ne s'affiche que dans la zone initialisée.
-Si je l'insère dans une zone non initialisé je ne le vois pas.

En gros, ca n'avance pas.

L'idéale serait en fait un Shape de forme personalisée, mais comment la modifier pour donner mon propre polygone?

Tu a regarde le lien que je t'ai poste Herdenson a poste des renseignement au sujet de la transparence, sur la deuxieme page du lien
28/09/2006, 09h06
bandit boy

Citation:

Envoyé par blondelle

bandit boy a ecrit:

Tu a regarde le lien que je t'ai poste Herdenson a poste des renseignement au sujet de la transparence, sur la deuxieme page du lien

Il parle de la propriété BevelOuter pour modifier la bordure du TPanel, mais je n'ai rien vu sur la transparence venant de Henderson ! 8O
Je ne suis peut être pas réveillé, ou j'ai mal vu.
28/09/2006, 13h49
henderson

Salut !

Si la complexité du graphisme n'est pas trop importante, on peut dériver de TCustomControl (et oui ... encore lui !).
Il suffit de surcharger la méthode Paint pour réaliser le dessin via son canvas en prenant comme couleur de fond celle du Parent et d'autres couleurs pour le graphisme.
On obtient ainsi une parfaite illusion à condition que l'objet ne vienne pas se superposer à d'autres car le TCustomControl reste un objet rectangulaire qui se dessine toujours comme tel.
Dans la OnMouseDown il suffira donc d'analyser la couleur du pixel en X,Y.
Si cette couleur équivaut à celle du parent c’est que l’on est hors du graphique.

Pour d’éventuels effets de bords 3D, il faudra les dessiner en fonction d’un état actualisé lors du OnMouseDown !

J'ai un exemple (simple) d'étoile à 4 branches... ainsi qu'un exemple (plus compliqué) avec 4 cercles pleins.

A plus !

Je ne sais pas si ca peut marcher, je suis prêt à tester. Par contre, ton idée de couleur et de test de la couleur du pixel X,Y n'est pas bête du tout. En gors je voulais faire un truc du genre:
Code:

1 2 3 4 5 6 7 8 9 10 11 +-----+----------------+ | | | | +-- | | / \ | +---/ \ | | | \------------+ | | | | +---\ | | \ | +----------------------+
c'est pas évident de dessiner comme ca :? et chaque zone serait un bouton. J'aurait eu besoin du MouseMoove et MouseClic. Mais si je fais chaque zone de couleur différente, et que lors du clic je prend la couleur du pixel cliqué, je peut deviner dans quel zone il est.
Je pense devoir m'en sortir comme ça.;)
Merci bien pour cette idée simple mais efficace. Je teste et je confirme

28/09/2006, 16h07
henderson

Salut !

Je vais voir ça en essayant d'y apporter le plus de flexibilité possible...

A plus !
28/09/2006, 18h07
blondelle

bandit boy a ecrit:

Citation:

Il parle de la propriété BevelOuter pour modifier la bordure du TPanel, mais je n'ai rien vu sur la transparence venant de Henderson !
Je ne suis peut être pas réveillé, ou j'ai mal vu.

Excuse moi, j'ai du me reveiller apres avoir fait un reve premonitoire car henderson a donne une idee
A+

Salut !

J'ai fini par m'arrêter à ce qui suit :

Code:

1
2
3
4
5
6
7
8
9
10
+-----+----------------+
| red |                |
|     +--    green     |
|    /   \             |
+---/     \            |
|   |      \-----------+ << Points[0]
|   |                  |
|   +---\   yellow     |
| blue   \             |
+----------------------+

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
enum{none, red, blue, yellow, green};
 
class jBanditBoyButton : public TCustomControl
{
private :
TColor Outside; //facultatif pour ce qui concerne cette classe
TPoint Points[8];
int FActiveButton;
 
protected :
    void __fastcall SetActiveButton(int Value);
 
public :
 
    __fastcall jBanditBoyButton(TComponent *Owner, TRect R);
    __fastcall ~jBanditBoyButton();
 
    void __fastcall Paint();
 
    void __fastcall WhenMouseDown(TObject *Sender, TMouseButton Button,
                    TShiftState Shift, int X, int Y);
 
__property int ActiveButton = {read=FActiveButton, write=SetActiveButton};
};

Les méthodes :

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
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
117
118
119
120
121
122
123
__fastcall jBanditBoyButton::jBanditBoyButton(TComponent *Owner, TRect R)
    : TCustomControl(Owner)
{
if(Owner->InheritsFrom(__classid(TWinControl))) Parent = (TWinControl*)Owner;
BoundsRect = R;
OnMouseDown = WhenMouseDown;
}
 
__fastcall jBanditBoyButton::~jBanditBoyButton()
{
}
 
void __fastcall jBanditBoyButton::Paint()
{
//La couleur de fond est donnée par Parent->Brush->Color
//Si on ne devait utiliser que 3 boutons sur les 4, Outside
//permettrait de simuler un clic dans le vide...
Outside = Parent->Brush->Color;
 
//Brush, Pen et on efface avec la couleur du parent tout en
//dessinant un cadre, puisque toute la surface est prise
Canvas->Brush->Color = Outside;
Canvas->Brush->Style = bsSolid;
Canvas->Pen->Color = clBlack;
Canvas->Pen->Style = psSolid;
Canvas->Pen->Mode = pmCopy;
Canvas->Rectangle(0,0,Width, Height);
 
//Calcul des 8 points
//Points[0] correspond au point le plus à droite les autres points en suivant.
//J'ai opté pour ce type de calcul afin de garder une apparence similaire
//quelles que soient les dimensions (dans les limites du raisonnable)
 
Points[0] = Point(Width - 1, Height * 9 / 16);
Points[1] = Point(Width * 12 / 24, Height * 9 / 16);
Points[2] = Point(Width *  9 / 24, Height * 3 / 16);
Points[3] = Point(Width *  6 / 24, Height *  3 / 16);
Points[4] = Point(Width *  4 / 24, Height *  7 / 16);
Points[5] = Point(Width *  4 / 24, Height * 13 / 16);
Points[6] = Point(Width *  8 / 24, Height * 13 / 16);
Points[7] = Point(Width * 10 / 24, Height - 1);
 
//Dessin des lignes
 
Canvas->Polyline(Points, 7);
Canvas->MoveTo(Points[3].x, 0); Canvas->LineTo(Points[3].x, Points[3].y);
Canvas->MoveTo(0, Points[4].y); Canvas->LineTo(Points[4].x, Points[4].y);
 
//Remplissage des zones
 
TColor color = (TColor)0x00000090;
if(ActiveButton == red) color = clRed;
Canvas->Brush->Color = color;
Canvas->FloodFill(1,1, Outside, fsSurface);
 
color = clNavy;
if(ActiveButton == blue) color = (TColor)clAqua;
Canvas->Brush->Color = color;
Canvas->FloodFill(1, Height - 2, Outside, fsSurface);
 
color = (TColor)0x00008A8A;
if(ActiveButton == yellow) color = clYellow;
Canvas->Brush->Color = color;
Canvas->FloodFill(Width-2, Height-2, Outside, fsSurface);
 
color = clGreen;
if(ActiveButton == green) color = clLime;
Canvas->Brush->Color = color;
Canvas->FloodFill( Width - 2, 1, Outside, fsSurface);
}
 
void __fastcall jBanditBoyButton::SetActiveButton(int Value)
{
if(Value <= green)
    {
    FActiveButton = Value;
    Repaint();
    }
}
 
void __fastcall jBanditBoyButton::WhenMouseDown(TObject *Sender,
            TMouseButton Button, TShiftState Shift, int X, int Y)
{
//Les boutons fonctionnent en mode exclusion mutuelle
//La dernière partie de l'arbre logique (facultatif) permet de revenir à état
//initial, c'est à dire aucun bouton sélectionné.
//La sélection est représentée par une teinte plus vive (approximativement)
 
TColor Pixel = Canvas->Pixels[X][Y];
if(Pixel == (TColor)0x00000090)
    {
    ActiveButton = red;
    }
else
    {
    if(Pixel == clNavy)
        {
        ActiveButton = blue;
        }
    else
        {
        if(Pixel == (TColor)0x00008A8A)
            {
            ActiveButton = yellow;
            }
        else
            {
            if(Pixel == clGreen)
                {
                ActiveButton = green;
                }
 
            //cette partie permet d'annuler la sélection
            //elle n'arrive que lorsque l'on clique sur un 
            //boutton déjà sélectionné 
            else
                {
                ActiveButton = none;
                }
            }
        }
    }
}

Pour tester, j'ai fait bêtement :

Code:

1
2
3
4
5
6
7
jBanditBoyButton *BanditBoyButton;
 
__fastcall TForm1::TForm1(TComponent* Owner)
    : TForm(Owner)
{
BanditBoyButton = new jBanditBoyButton(this, Rect(10,10,130,90));
}

En espérant que... !

A plus !

30/09/2006, 18h40
bandit boy

C'est cool, la class marche bien, l'affichage est correct mais je n'ai pas d'affichage de couleur?
Je ne vois pas trop d'où viens le soucis vu que tu passes bien color et tu l'affect à Brush.
01/10/2006, 11h37
henderson

2 pièce(s) jointe(s)

Salut !

Quand tu dis qu'il n'y a pas de couleurs, ça veut dire quoi au juste ...?

Est-ce que tu vois les couleurs dans ces miniatures ?

A plus !
02/10/2006, 10h03
bandit boy

En fait nan.
La couleur de chaque pièce dessinée à la base est de la couleur du fond de la form. Donc ActiveButton est false tout le temps.
03/10/2006, 18h34
Patrick Seuret
J'ai eu le même problème: surfaces vide. J'ai corrigé en mopdifiant le mode de remplissage des surfaces:

Code:

Canvas->FloodFill(1,1, clBlack, fsBorder);

pour chaque FloodFill.

C'est excellent comme ça marche bien :)

[edit]En fait la couleur de fond obtenue par

Code:

Parent->Brush->Color

n'est pas la couleur de fond obtenue par

Code:

Canvas->Pixels[X][Y]

. Lorsque je fais:
Code:

1 2 3 4 5 color = clGreen; if(ActiveButton == green) color = clLime; Canvas->Brush->Color = Outside; TColor fond=Canvas->Pixels[Width - 2][1]; Canvas->FloodFill( Width - 2, 1, clBlack, fsBorder);
je trouve fond=-1 et Outside= -16777201 (0xFFFFF1)[/edit]
04/10/2006, 13h14
bandit boy

Nikel, ca marche impeccable.
L'étape suivante serait de se passer des couleurs. Est ce qu'il existe une méthode pour savoir si on se trouve dans un polygone identifié par un tableau de TPoints ?

Sinon je mets résolue car le sujet à au moins une solution.;)
04/10/2006, 15h03
Patrick Seuret

Si tu veux te passer des couleurs à l'écran, alors tu peux faire une image en mémoire qui n'est pas affichée et où la "couleur" de chaque pixel indique à quel bouton il appartient. Ensuite, tu utilises exactement la même technique de détection mais en prenant les coordonnées du MouseMove que tu vas tester dans l'image en mémoire. Tu peux aussi faire un tableau à la place de l'image.
04/10/2006, 15h49
henderson

Salut !

Je crois qu'il existe des algos pour détecter si un point est dans un polygone.
Ca se trouve dans la jAPI.

A plus !
04/10/2006, 17h34
bandit boy

Ok Ok, tout est nikel !
Je vais réussir à me débrouiller avec tout ca. Merci bien messieurs.