Discussion :

[yesra]

bonjour
comment dessiner une fleshe sur une application clx,une fleshe qui soit comme un arc.
merci

[henderson]

Salut !
Voic un exemple à l'aide des courbes de Bézier.
Ici on utilise une class TFleche.
La courbe de Bézier utilise 4 points :
- le premier point et le quatrième point représentent les extrémités.
- les deuxième et troisième points sont des points de controle qui
ont été unifiés ici pour ne représenter qu'un point de contrôle unique,
c'est à dire que tous deux ont les mêmes valeurs (x,y).
- la pointe de la flèche est dessinée en tenant compte de l'angle formé
par le segment délimité par la première extrémité et le point de controle,
et un axe yy' passant par l'extrémité.

Afin de montrer, j'ai fait en sorte de pouvoir agir sur le point de contôle
à l'aide des événements de la souris.
La flèche est dessinée directement sur la form.

Ceci a été réalisé à partir de BCB3 Pro.
A plus !

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
//------- extrait du .cpp
TFleche *Fleche;
bool MoveFlag = false; int Movex; int Movey;
 
//--
__fastcall TForm1::TForm1(TComponent* Owner)
    : TForm(Owner)
{
Fleche = new TFleche(Point(100,100), Point(200,50), Point(200,200));
}
//--
__fastcall TFleche::TFleche(TPoint P1, TPoint P2, TPoint P3)
{
Points[0] = P1; Points[1] = P2; Points[2] = P2; Points[3] = P3;
}
//--
int __fastcall TFleche::Arrondir(double A)
{
int a = A;
double r = (A - a) * 2;
return(a + r);
}
TPoint __fastcall TFleche::Rotation(int X, int Y, double *S, double *C)
{
double h = hypot(X,Y); double sina = X/h; double cosa = Y/h;
double x = h * ((sina * *C) + (*S * cosa));
double y = h * ((cosa * *C) - (*S * sina));
return(Point(Arrondir(x),Arrondir(y)));
}
//--
void __fastcall TFleche::Draw(TCanvas *C)
{
C->Pen->Style = psSolid; C->Pen->Mode = pmCopy;
//calculer sinus et cosinus de l'angle
int x = Points[1].x - Points[0].x; int y = Points[1].y - Points[0].y;
double h = hypot(x,y); double si = 0.0; double co = 1.0;
if(h != 0.0)
    {
    si = y / h; co = x / h;
    }
//calculer la rotation à appliquer sur chaque sommet du triangle de la flèche
TPoint P1 = Rotation(-4, - 4, &si, &co);
int x1 = Points[0].x - P1.x;
int y1 = Points[0].y + P1.y;
TPoint P2 = Rotation(-4, +4, &si, &co);
int x2 = Points[0].x - P2.x;
int y2 = Points[0].y + P2.y;
TPoint P3 = Rotation(6, 0, &si, &co);
int x3 = Points[0].x - P3.x;
int y3 = Points[0].y + P3.y;
 
C->Pen->Color = clBlack;
C->MoveTo(x1,y1);
C->LineTo(x2,y2);
C->LineTo(x3,y3);
C->LineTo(x1,y1);
C->Brush->Color = clBlack;
C->FloodFill(Points[0].x, Points[0].y, clBlack, fsBorder);
C->PolyBezier(Points, 3);
}
//---------------------------------------------------------------------------
void __fastcall TForm1::DrawFleche()
{
Canvas->Pen->Color = clSilver; Canvas->Brush->Color = clSilver;
Canvas->Rectangle(0,0,ClientWidth, ClientHeight);
Fleche->Draw(Canvas);
//dessiner le point de contrôle
int x = Fleche->Points[1].x;
int y = Fleche->Points[1].y;
Canvas->Brush->Color = clRed;
Canvas->Rectangle(x - 3, y - 3, x + 4, y + 4);
}
//--
void __fastcall TForm1::FormPaint(TObject *Sender)//OnPaint de Form1
{
DrawFleche();
}
 
/*
      Pour voir l'effet du point de contrôle sur l'orientation de la
      la pointe de la flèche
*/
 
void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton Button,
      TShiftState Shift, int X, int Y)
{
int minx = Fleche->Points[1].x - 3;
int maxx = Fleche->Points[1].x + 4;
int miny = Fleche->Points[1].y - 3;
int maxy = Fleche->Points[1].y + 4;
if((X >= minx) && (X < maxx) && (Y >= miny) && (Y <= maxy))
    {
    MoveFlag = true; Movex = X; Movey = Y;
    }
}
//--
void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
      int X, int Y)
{
if(MoveFlag)
    {
    int x = Fleche->Points[1].x + X - Movex;
    int y = Fleche->Points[1].y + Y - Movey;
    Fleche->Points[1] = Point(x,y); Fleche->Points[2] = Point(x,y);
    Movex = X; Movey = Y;
    DrawFleche();
    }
}
//--
void __fastcall TForm1::FormMouseUp(TObject *Sender, TMouseButton Button,
      TShiftState Shift, int X, int Y)
{
MoveFlag = false;
}
//--

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
//----extrait du .h
class TFleche
{
public :
TPoint Points[4];
    __fastcall TFleche(TPoint P1, TPoint P2, TPoint P3);
    void __fastcall Draw(TCanvas *C);
    int __fastcall Arrondir(double A);
    TPoint __fastcall Rotation(int X, int Y, double *S, double *C);
};
//--
class TForm1 : public TForm
{
__published:	// Composants gérés par l'EDI
    void __fastcall FormPaint(TObject *Sender);
    void __fastcall FormMouseDown(TObject *Sender, TMouseButton Button,
          TShiftState Shift, int X, int Y);
    void __fastcall FormMouseMove(TObject *Sender, TShiftState Shift,
          int X, int Y);
    void __fastcall FormMouseUp(TObject *Sender, TMouseButton Button,
          TShiftState Shift, int X, int Y);
private:	// Déclarations de l'utilisateur
public:		// Déclarations de l'utilisateur
    __fastcall TForm1(TComponent* Owner);
    void __fastcall DrawFleche();//pour dessiner la flèche sur la form
};

[yesra]

bonjour
mais comment je peut utiliser ces procedures pour desssiner une fleshe
entre deux sommet en cliquand a chaque fois sur un sommet je sauvegarde ses coordonnee puis les cordonnee du deuxieme puis je desssine la fleshe entre eux
merci

[henderson]

Salut !

Il est impossible tracer un arc en ne s'appuyant que sur deux points sauf
cas précis où ton arc est un demi cercle mais dans ce cas, reste à savoir
le quel des deux !

Le minimum est trois points ! Par contre, s'il s'agit de tracer un segment...
tu aurais pu le dire plus tôt !

La saisie d'un point se fait en récupérant (X,Y) lors de l'événement OnMouseDown.

A plus !

NB : à partir de l'exemple que j'ai donné, si le problème se situe au niveau
de la lisibilité du tout, tu peux utiliser une unité simple pour y copier tout
ce qui concerne la class TFleche. A cause de sin() et cos() il faudra rajouter

Code :

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

#include <math.h>

Le reste ne concerne qu'un exemple d'utilisation avec une fiche pour se donner
la possiblité d'agir manuellement sur le point de contrôle.
C'est juste un exemple pour illustrer :

- la création de la fleche
- l'action sur le point de contrôle et son effet sur l'orientation de la pointe de
la flèche.

A noter que point de contrôle à une particularité :
lorsqu'il se déplace sur la médiatrice du segment délimité par p1 et p4, on obtient
un courbure proche de l'arc jusqu'à une certaine limite au delà de la quelle la
courbure tend vers une demi ellipse (parabole). Mais ici aussi il faut savoir de quel
coté on se déplace sur la médiatrice (concave ou convexe ?).