[VS2005][C#] Construire une flèche du même genre que Visio

**pocket** · 06/03/2006, 13h52

Bonjour.

J'ai besoin de construire une flèche faisant le lien entre deux objets placés sur mon formulaire.

Par exemple, j'ai 3 boutons, btn1, btn2 et btn3. Je voudrais dessiner une flèche qui part de btn1 et arrive jusqu'à btn3.

C'est le même principe que Visio, l'outil MS de modélisation.

J'ai déjà une piste, celle de la méthode DrawLine et je suis entrain de l'exploiter. Si, par contre, vous avez une idée sur une façon plus native à VS 2005 ou toute autre méthode, merci de me tenir informer.

**chnew** · 06/03/2006, 14h15

Code :

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

1
2
3
4
5
6
7
 
                Pen penFl = new Pen(Color.Black, 50);
                System.Drawing.Drawing2D.AdjustableArrowCap aArrow = new System.Drawing.Drawing2D.AdjustableArrowCap(5, 5);
                penFl.CustomEndCap = aArrow;
 
                Graphics g = this.CreateGraphics();
                g.DrawLine(penFl, X, Y, X1, Y1);

**pocket** · 06/03/2006, 14h54

Merci chnew pour ton aide.

J'arrive maintenant à dessiner la flèche.

Par contre, j'ai un autre souci :

J'ai besoin de pouvoir deplacer le bout de la flèche (afin de l'orienter vers le composant destination de mon choix).
J'ai alors pensé au MouseDown ou tout évènement lié à Mouse. Mais le problèm est quaucun évènement n'est lié à un élément de type Graphics!

Sauriez vous comment déplacer le bout d'une flèche dessinée en C# ?

Merci.

**chnew** · 06/03/2006, 15h03

Effectivement il n'y a pas (du moins pas a ma connaissance) d'evenement lié a l'element que tu viens de dessiner.

tu devrais donc passer par un usercontrol et de delimiter ton usercontrol (sa region) à la forme que tu veux lui donner.

Je ne pense pas qu il y ait plus simple.

mais ne serait ce pas plus simple si tu lui donne les coordonnées de la ou la pointe de ta fleche dois etre ?

**pocket** · 06/03/2006, 15h19

Envoyé par chnew

mais ne serait ce pas plus simple si tu lui donne les coordonnées de la ou la pointe de ta fleche dois etre ?

Je ne pense pas car en fait mes composants sont déplaçables çàd que je peux les déplacer librement sur mon panel. Donc si je fait un lien fixe entre deux composants et que je déplace un des deux composants alors la flèche ne suit pas...

Envoyé par chnew

tu devrais donc passer par un usercontrol et de delimiter ton usercontrol (sa region) à la forme que tu veux lui donner.

Je comprend le principe de création d'un usercontrol mais je ne comprend pas la suite de ta phrase.

Je crée un userControl Flèche ?

Et pour le déplacer ?

**del-dongo** · 06/03/2006, 17h45

il te faut créer une classe Arrow qui possède , 2 points,une épaisseur, un sens et une méthode Draw par exemple. Dans Draw, tu colles le code de chnew.

Dans ta form, quand tu veux créer une arrow, tu instancies ta classe arrow et tu t'arranges pour appeller

Code :

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

myArrow.Draw(e.Graphics)

dans le paint de ta form.

Ta classe Arrow possèdera une méthode qui te permettrade savoir si un point est dans ta flèche qui ressemblera à ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 public bool Contains(int x, int y)
{
    bool contains = false;
    using (Region r = BuildRegion())
   {
           using (Point p = new Point(x,y))
          {
                 if(r.IsVisible(p))
                    contains = true;
          }
   }
    return contains;
}

et tu appelles cette méthode dans le mousedown de ta form....

**pocket** · 08/03/2006, 14h56

Bonjour del-dongo. Merci pour ta réponse.

J'ai suivi ta méthode.

J'arrive ainsi à créer une ligne liant deux boutons en instanciant la méthode Draw.

Par contre, je ne saisi pas la suite.

Comment me servir de la méthode Contains pour déplacer la flèche ?

**del-dongo** · 08/03/2006, 15h29

bne la méthode contains te permettra de savoir sur le onmousedown si ta fleche est concernée par le clic souris.

si oui alors il faut que tu enclenche le move sur ta fleche si la souris bouge te que le clic reste enfonce

**pocket** · 08/03/2006, 16h35

Merci pour cette précision.

Par contre, saurais tu comment bien définir la région sur laquelle je teste dans Contains la présence d'un point ?

Si j'ai bien compris :
il s'agit de tester si le point où la souris est située (e.location) est sur la ligne dessinée ou pas.
Pour ça, j'appelle maArrow.Contains(e.Location.X, e.Location.Y).

Par contre, je dois définir la Region r comme étant la ligne que je veux deplacer.

Sais tu comment faire une Region sur cette ligne ?

Pour le moment, j'ai fait Region = new Region() ---> ça construit une région sur tout le formulaire! Donc le Contains retourne tout le temps yes et donc dès que je déplace la souris la flèche suit même si la souris est très loin de la flèche çàd que même si je souhaite pas déplacer la flèche...

As tu une idée ?

En te remerciant encore.

**pocket** · 08/03/2006, 17h13

Voici ma situation actuelle :

Vérifiaction si le point de la souris est sur la flèche à déplacer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 public bool Contains(Point point)
        {
            bool contains = false;
 
            using (Region r = new Region())
            {
                if (r.IsVisible(point))
                {
                    contains = true;
                }
            }
            return contains;
        }

Dessin de la ligne (première fois)

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 public void Draw(Point pD, Point pA)
 {
            Pen penFl = new Pen(Color.Black, 1);
            System.Drawing.Drawing2D.AdjustableArrowCap aArrow = new System.Drawing.Drawing2D.AdjustableArrowCap(5, 5);
            penFl.CustomEndCap = aArrow;
 
            Graphics g = control.CreateGraphics();
            g.DrawLine(penFl, pD, pA);
}

Effacement et redessin de la ligne dans la nouvelle position

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
        public void ReDraw(Point pD, Point pA)
        {
            Pen penFl = new Pen(Color.Black, 1);
            System.Drawing.Drawing2D.AdjustableArrowCap aArrow = new System.Drawing.Drawing2D.AdjustableArrowCap(5, 5);
            penFl.CustomEndCap = aArrow;
 
             Graphics g = control.CreateGraphics();
            g.Clear(control.BackColor);
            g.DrawLine(penFl, pD, pA);
 
}

La méthode principale :
Elle fait bouger le bouton courant (bouton sur lequel je clique et que je déplace).
Elle est sensée agir en même temps sur la flèche...

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
 
 private void currBtn_MouseDown(object sender, MouseEventArgs e)
        {
            if (currBtn != (Button)sender)
            {
                precBtn = currBtn;
                currBtn = (Button)sender;
            }
 
 
            if (!maFleche.booAjoutFleche)
            {
                if (e.Button == MouseButtons.Left)
                {
 
                    // Repositionnement du bouton
                    ReleaseCapture();
 
                    SendMessage(currBtn.Handle, WM_NCLBUTTONDOWN, HTCAPTION, 0);
 
                    TraiterDepassementBords();
 
 
                    // On redessine la flèche si elle est contenue dans la region
                    if (precBtn != null)
                    {
 
                        if (maFleche.Contains(e.Location))
                        {
                            maFleche.ReDraw(currBtn.Location, precBtn.Location);
                        }
                    }
                }
            }
            else
            {
               // On crée la flèche qui lie les deux boutons
                maFleche.Draw(currBtn.Location, precBtn.Location);
 
                maFleche.booAjoutFleche = false;
            }
        }

Mon but est de faire bouger le bout de la flèche en même temps que le bouton que je déplace!

J'arrive à faire ça mais le soucis est que si j'ajoute un 3° bouton et que je fait un ligne entre ce 3° bouton et le premier bouton par exemple, le lien entre le 1° et le 2° bouton est effacé!

Avez vous une idée ?

**del-dongo** · 08/03/2006, 17h24

pour la region, c'est pour ca que j'avais mis

Code :

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

BuildRegion()

, parce que il faut construire cette region en fonction des propriétées de la flèche...Tu peux construire une region à partir d'un rectangle ou d'un GraphicsPath regarde les classes

Code :

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

Rectangle

Code :

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

GraphicsPath

, le graphicspath te permet de construire une form par concaténation de lignes..., une fois te region correctement construite ca marchera..
pour ce qui est de ta ligne qui disparait c'est normal je suppose qu'en fait tu vas devoir maipuler une collection de Arrow et dans le méthode draw faire

Code :

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

1
2
3
4
5
 
foreach(Arrow myArrow in maCollectionDeArrow)
{
   myArrow.Draw(...);
}

**pocket** · 16/03/2006, 09h33

Mille merci del-dongo.

Grace à ton aide tout baigne maintenant sur cette partie.

J'ai mis du temps à écrire car je travaille sur d'autres choses en parallèle.

Bonne journée.

[VS2005][C#] Construire une flèche du même genre que Visio

Windows Forms

Vue hybride

Discussions similaires

Partager

Partager