Discussion :

[lejert]

Bonjour,

J'ai une image que j'ai mise dans une PictureBox et j'aimerais créer des zones dans cette image. J'aimerais que ces zones soient colorées et en semi transparence lors du passage de la souris sur celles-ci.

J'ai pas mal cherché mais n'ai pas trouvé vraiment de piste valable, entre les Graphics qui apparamment ne gèrent pas la transparence et les zones Rectangle...

Merci d'avance.
Exemple

[Pol63]

pour ton exemple c'est faisable et simple
une fois l'image dans le picturebox essaye sur l'event pctbox.paint de faire
e.Graphics.FillRectangle
fillrectangle demande un brush, il te faut un solidcolorbrush
et pour la couleur tu fais un color.fromargb (100,255,0,0) (alpha, red, green, blue)
ca fera de la transparence (qui est gérée via alpha) rouge
si tu veux une bordure plus foncé ou moins transparente il faut la faire avec drawrectangle

après pour la gestion du survol et de la zone il faut voir sur mousemove (et peut etre mouseleave)
remplir quelques variables pour la ou les zones à dessiner, et appeler pctbox.invalidate
ca demandera le rappel de l'event paint, et là selon les variables tu sauras quoi dessiner et où

[theMonz31]

bonjour

tu as aussi l'option d'utiliser un masque de couleur pour savoir dans quelle zone tu te trouves. En gros, tu as ton image d'afficher et un masque qui n'est pas affiché mais qui te sers à déterminer la couleur par rapport aux coordonnées souris.. et donc, savoir sur quelle zone tu te trouves...

Pour la transparence, Pol63 a bien expliqué les choses....

Et si tu as des zones autres que des rectangles, tu peux gérer le multiline ou bien utiliser GraphicsPath aussi

[lejert]

Merci pour vos réponse, cela fonctionne. Le problème que j'ai encore est dû à tout le comportement que je dois gérer en plus : Dessin, clics, annotations....

[MABROUKI]

bonjour lejert....
Apparemment tu cherches à faire un picturebox custom avec des "zones hotspot" personnalisees....
Bah tu dois gerer en memoire 2 images l'original et son double(le masque)...
Dans le double tu pourras dessiner les figures de ton choix , badigeonne à ton aise .... chaque figure etant "une zone hotspot"....
Lorsque on survole une zone de l'original ,c'est la zone dans le double(masque ) qui s'affiche.....
Bref ,voici un exemple complet qui illustre la demarche à adopter tiree de la MSDN Doc rubrique "MSDN Magazine articles july 2006" intitule "Context-Sensitive PictureBox Controls par Dino Esposito"
L'exemple est en vb.net , que tu peux telecharger et adapter à tes besoins en c#.....(il est sur ton disque dur si tu as MSDN Library Help installee..)
En esperant qu'il fera ton bonheur....
bon code...............

[lejert]

Merci pour votre aide... voici la solution. Mon erreur à été de créer des "couches" de picturebox. Ici je fais une liste de "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
public class RectangleZone
    {
        public RectangleZone(int x, int y, int width, int height)
        {
            this.fRect = new Rectangle(x, y, width, height);
        }
 
        private Rectangle fRect;
        public Rectangle Rect
        {
            get { return fRect; }
            set { fRect = value; }
        }
 
        private Boolean fVisible;
        public Boolean Visible
        {
            get { return fVisible; }
            set { fVisible = value; }
        }
 
        private string fLabelText;
        public string LabelText 
        {
            get { return fLabelText; }
            set { fLabelText = value; }
        }   
    }

... non liée à ma paint box qui contient l'image. Je vérifie dans la liste sur le mousemove de l'évènement paint() . La fonction Refresh() de la picturebox permettra de redessiner les zones "visibles"

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
 
 
private void pbMain_MouseMove(object sender, MouseEventArgs e)
        {
            MouseCoordiates.X = e.X;
            MouseCoordiates.Y = e.Y;
 
            Rectangle rx = new Rectangle(e.X, e.Y, 1, 1);
            RectangleZone rz = WichZoneIntersects(rx, Zones);
            if (rz != null)
            {
               // survol de la zone 
            }
            else 
            { 
                // en dehors d'une zone définie
            }
        }
 
        private void pbMain_Paint(object sender, PaintEventArgs e)
        {
            Pen p = new Pen(Color.FromArgb(255, 255, 0, 0));
            SolidBrush b = new SolidBrush(Color.FromArgb(70, 255, 0, 0));
            for (int i = 0; i <= Zones.Count - 1; i++)
            {
                if (Zones[i].Visible == true) 
                {
                    e.Graphics.DrawRectangle(p, Zones[i].Rect);
                    e.Graphics.FillRectangle(b, Zones[i].Rect);                
                }
            }
            p.Dispose();
            b.Dispose();
        }

La fonction qui vérifie les coordonnées de la souris pour le mousemove

Code :

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

1
2
3
4
5
6
7
8
9
10
11
private RectangleZone WichZoneIntersects(Rectangle R, List<RectangleZone> RectList)
        {
            for (int i = 0; i <= RectList.Count - 1; i++)
            {
                if (RectList[i].Rect.IntersectsWith(R))
                {
                    return RectList[i];
                }
            }
            return null;
        }

Un exemple d'utilisation du machin : on défini une zone :

Code :

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

1
2
3
4
5
6
7
 
r1 = new RectangleZone(172, 23, 50, 90);
r2 = new RectangleZone(160, 120, 80, 50);
r1.LabelText = "Zone1";
r2.LabelText = "Zone2";
Zones.Add(r1);
Zones.Add(r2);