Dessiner une flèche dans un QCanvas ?

Version imprimable

21/08/2008, 09h56
nouncyr

Dessiner une flèche dans un QCanvas ?

Bonjour,

Je développe une interface graphique sous Qt3.3 ...
J'aurai besoin de dessiner une flèche pour relier des éléments graphiques...
Donc je voudrai créer une classe qui dérive de la classe QCanvasRectangle (pour avoir la forme d'un rectangle) et dedans je voudrai utiliser la fonction drawShape() pour dessiner un trait + une flèche au bout ...

Je ne sais pas comment m'y prendre... :cry:

Aidez moi SVP !!!

Merci beaucoup :)
21/08/2008, 11h54
MacPro

ô, ben on dirait qu'on va avoir le même problème très bientôt !
Moi je dois avoir d'un côté une liste d'éléments graphiques, disons des carrés, des triangles, des ronds et des losanges. Le but, est de constuire plus ou mois un graphcet. Il faut que je prenne les éléments de ma liste, que je les glisse dans une zone, puis que je les relie entre eux par des flèches.

Pour t'aider, je pense que tu peux regarder dans les démos de Qt :

http://qt.developpez.com/doc/4.3/gra...-diagramscene/
21/08/2008, 11h56
yan

il est en Qt3...
21/08/2008, 12h48
nouncyr

Oui, je bosse sous Qt3.3 donc je ne peux pas faire tout ça :mrgreen: ...
Mais sinon, ça aurait été bon ... dommage
ça ne devrait pas être si compliqué que ça ... je veux juste créer une flèche que je pourrai appeler comme une QCanvasLine en fait (en passant en paramètre x1,y1,x2,y2 ... les coordonnées des deux extrimités quoi)

Personne n'a vraiment aucune idée ???

Je galère ... :aie:
21/08/2008, 14h01
yan

ton problème est de pouvoir faire plusieur flèche qui ne se rentre pas dedans et jolie à voir... C'est ce qui est difficile à faire. Il existe graphviz (peut être utilisé par doxygen) qui fait cela. Jamais testé et ce n'est pas en Qt.

Faire une flèche bête c'est facile..... Si c'est cela, dit nous la ça cloche
21/08/2008, 14h06
nouncyr

Oui c'est ça, je voudrai juste faire une simple flèche ...

En fait, sur un QCanvas, j'ai plusieurs carrés que je veux relier entre eux.
Cependant, la relation entre eux est soit une simple ligne, soit une ligne fléchée (pour indiquer une direction).

Donc je voudrais faire une classe qui me dessine une ligne avec une flèche au bout ... tout simplement... et que je puisse utiliser comme une ligne (avec les même paramètres) ...

Je ne sais pas si je suis clair:roll:

Merci
21/08/2008, 14h13
yan

alors faut le faire à la main.en héritant de qcanvaspolygonalitem qui dessine une ligne + le dessin du bout de la flèche, ça doit pas être très dure....
http://qt.developpez.com/doc/3.3/qcanvaspolygonalitem/

Mais je ne connait pas Qcanvas... j'utilise Qt4
As tu regardé un peu la doc de qt3 sur les canvas?
http://qt.developpez.com/doc/3.3/canvas/
21/08/2008, 14h21
nouncyr

Faire la ligne, ça j'arrive :D
Mais il faudrait que j'arrive à faire partir deux petits traits de l'extrémité de la ligne pour faire la flèche.
Et il faudrait que ces deux traits aient le même angle par rapport à à la ligne... c'est ça qui n'est pas évident :aie:
21/08/2008, 14h36
nouncyr
On va dire que la flèche est composée d'un triangle au bout. Le sommet est facile à trouver car il s'agit des coordonnées du point d'extrémité de la ligne.
Maintenant, Il faudrait que j'arrive à calculer les coordonnées des 2 autres sommets du triangle qui forment ma flèche...

J'ai un ami qui m'a dit que je pourrai utiliser ma ligne principale comme vecteur...
Ensuite, il faudrait que je le normalize.
Je n'aurai plus qu'à multiplier par la longueur souhaitée pour mon triangle .
Et appliquer un angle...

Mais je ne sais pas trop comment m'y prendre

ça pourrait faire un truc comme ça ...
Code:

1 2 3 4 5 6 7 L: la longueur des arrêtes de mon triangle d= [mon_vecteur.normalize()]*L //Calcul d'un sommet: x=d*(Cos de langle choisi) y=d*(Sin de langle choisi)
Vois tu plus clair ???
21/08/2008, 14h51
yan

il te manque un vecteur perpendiculaire a ta ligne.
A et B deux point de la ligne et B est là ou tu veut ta flèche
L : vecteur ligne normalisé (B-A)/norm(B-A)
N : vecteur normale normalisé trouvé avec N*L =Nx*Lx+Ny*Ly =0

tu trouve donc deux points:

FinLigne-L+d*N

FinLigne-L-d*N

avec d une distance que tu choisi
21/08/2008, 14h54
nouncyr

oui exact , j'avais oublier de préciser le vecteur perpendiculaire...

Je comprends à moitié ton raisonnement mais je suis incapable de le retranscrire en ligne de code .... pourrais tu m'aider stp ???
21/08/2008, 14h57
yan

Citation:

Envoyé par nouncyr

Je comprends à moitié ton raisonnement

qu'es ce que tu ne comprend pas?
21/08/2008, 15h02
nouncyr

Citation:

L : vecteur ligne normalisé (B-A)/norm(B-A)

En code C++, ça donne quoi???

Citation:

N : vecteur normale normalisé trouvé avec N*L =Nx*Lx+Ny*Ly =0

Nx et Lx , ce sont quels points?
Et en code C++, ça donne quoi ?

Citation:

FinLigne-L+d*N

FinLigne-L-d*N

FinLigne correspond à quoi? des coordonnées de points ???
Et en code C++???

Je sais , je suis un boulet mais je ne suis pas très calé ...
21/08/2008, 15h08
yan

1 pièce(s) jointe(s)

voici un petit shema
21/08/2008, 15h08
MacPro

HUMM, il te faut alors une classe comme tu dis.
Moi j'en vois bien une avec les membres suivants :

Partir de la convention suivante :
fleche verticale pointant vers le haut.

float tilt; // angle que fais la flèche par rapport à l'horizontale
float lineLength; // longeur de la ligne
float arrowHeight; // hauteur de la pointe (hauteur du triangle)
float baseWidth; // largeur de la base de la pointe

QPoint lineStart; // point de départ
QPoint lineStop; // point d'arrivée
QPoint arrowTop; // le sommet de la pointe
QPoint arrowLeft; // le sommet à gauche de la pointe
QPoint arrowright; // le sommet à droite de la pointe

QLine ligne; // la partie ligne de la flèche
QPolygon arrow(3); // la pointe qui comporte trois sommets

Ensuite, à priori, tu connais la position de la pointe (c'est là que tu veux pointer), ça te donne la position de arrowTop, donc tu fais :

arrowTop.setX(taposition en x);
arrowTop.setY(taposition en Y);

Puis, il te faut ton angle, et à partir de cet angle et des longeurs lineLength,
arrowHeight et baseWidth, tu vas calculer la position de tous les autres points, donc un peu de trigonometrie ça devrait aller.

Un petit schéma pour t'aider :yaisse2::

http://www.electronicsforfun.com/arrow.png

(la position (0,0) c'est el coin haut gauche de l'ecran).

Connaissant la pointe, c'est facile de connaître la base de la ligne, sa position en x c'est arrowTop.x - C avec C = (lineLength+ arrowHeight)*cos(tilt) et en y c'est
arrowTop.y = y + (lineLength+ arrowHeight)*sin(tilt)

et ainsi de suite.

Sinon, tu as d'autres solution,comme dessiner complement une fleche dans un bitmap ou png (png possède la transparence), puis te servir des méthodes comme rotate(...), setPos(...) et d'autres...

j'oubliais, après que tout tes calculs sont faits, tu traces simplement :
arrow.setPoint(0,arrowLeft);
arrow.setPoint(1,arrowTop);
arrow.setPoint(2, arrowRight);

dans un QPainter painter tu fais painter.drawPolygon(arrow) et painter.drawLine(QLine(lineStart,lineStop));

L'avantage, c'est que tu pourras même choisir la couleur de tout ce que tu veux, même du remplissage :D
21/08/2008, 15h09
MacPro

J'étais sûr que le temps d'écrire mon post, y'en aurait 4 ou 5 similaires ! :mrgreen:
21/08/2008, 15h14
nouncyr

Je vais essayer de comprendre .... ;) mais je ne garantis rien ...

Sinon , je ne suis pas sur que la méthode rotate() existe sous Qt3.3 ... malheureusement
21/08/2008, 15h19
nouncyr

En fait, moi je voudrai que les points LineStop et ArrowTop soient les mêmes...
Sinon pour l'angle, je voudrai que ça soit l'angle entre le trait de la flèche et la ligne de base ....

J'ai aussi un peu de mal à retranscrire tout ça sous forme de code ...:cry:
21/08/2008, 15h29
MacPro

toi ce que tu veux là c'est encore plus simple, ça te fait trois lignes à tracer.
Le mieux, c'est que tu te contentes déjà de tracer la ligne et rien de plus. L'angle, on s'en fiche pas mal de savoir où il est, dans que tu t'es fixé un repère !

tiens, regarde QLine propose encore pas mal de méthodes pour te simplifier encore la vie (dx(), dy(), translate() ...):

http://qt.developpez.com/doc/4.4/qline/

faut regarder si ça existe sur Qt 3.3
21/08/2008, 16h09
nouncyr

Citation:

Connaissant la pointe, c'est facile de connaître la base de la ligne, sa position en x c'est arrowTop.x - C avec C = (lineLength+ arrowHeight)*cos(tilt) et en y c'est
arrowTop.y = y + (lineLength+ arrowHeight)*sin(tilt)

Je n'ai pas trop compris ça ...
Pour connaitre la base la ligne, il me faudrait calculer les coordonnées des points arrowLeft et arrowRight... ,non ?

En fait, en suivant ton exemple, moi ce que je voudrais , c'est juste de pouvoir calculer les coordonnées des points arrowLeft et arrowRight en fonction des coordonnées du point arrowTop (car ce sont justement les coordonnées x et y du point arrowTop qui seront passés en paramètres lors de la construction de mon objet). L'angle sera choisi initialement (par exemple un angle de 45 degrés).

Comprends tu ?
21/08/2008, 16h15
yan

as tu compris mon shemat???
21/08/2008, 16h21
nouncyr

ben non ...:oops:

d correspond à quoi ???
dans les formules , il y a des vecteurs (L et N) ... mais comment je fais ça en C++??
21/08/2008, 16h26
MacPro

Oui, je comprends, c'est pas compliqué non plus. Par contre, si je te donnais un angle varaible ce n'est pas pour rien, car sinon ta pointe va sans cesse pointer dans le même sens.

mon explication avec el calcul, te donne le calcul des coordonées du point lineStart, ce qui ce voit d'ailleurs.

il te suffit d'imaginer les triangles rectangles là où il faut et appliquer des sinus et des cosinus.
Encore plus simple si l'idée de faire de la trigo te pique les yeux : prends un angle (noté alpha sur mon schema) entre les lignes de la pointe et la ligne de la fleche egal a 45 degres, du coup, plus de sinus ni cosinus puisque tu te retrouves avec des lignes horizontales ou verticales :

http://www.electronicsforfun.com/arrow2.png

là tu vois bien qu'en connaissant la position de la pointe, la position des autres points se déduit bêtement en ajoutant/soustrayant la longeur des lignes des pointes.

Après cela, je ne pourrais rien faire de plus pour toi.
21/08/2008, 16h35
nouncyr

Citation:

Envoyé par Kestufou

là tu vois bien qu'en connaissant la position de la pointe, la position des autres points se déduit bêtement en ajoutant/soustrayant la longeur des lignes des pointes.

Ben non justement , je ne vois pas ...
SI je demande c'est que je ne sais pas comment faire...
Comment je fais pour calculer les coordonnées des points "left" et "right" sachant que je connais la ligne qui va du point "LineStart" au point "LineStop" (point TOP sur le dernier dessin) ????????

Merci
21/08/2008, 16h52
yan

Citation:

Envoyé par nouncyr

ben non ...:oops:

d correspond à quoi ???
dans les formules , il y a des vecteurs (L et N) ... mais comment je fais ça en C++??

d est la demi longueur en pixel de la base de ta flèche
h est la hauteur en pixel de ta flèche (je l'avais oublié)
L =B-A que tu normalise
Pour N, pose Nx =1 et resoud Lx+Ny*Ly =0 =>Ny =-Lx/Ly; puis tu la normalise.

Ceci te permet d'obtenir deux points :
N1 = B - h*L + d*N
N2 = B - h*L - d*N
Sert toi du dessin pour comprendre
21/08/2008, 16h56
yan

Y as un exemple pour dessiner une horloge avec les QPainter :
http://qt.developpez.com/doc/3.3/aclock-example/
et exemple sur les cancas
http://qt.developpez.com/doc/3.3/canvas-example/
21/08/2008, 17h01
MacPro

sérieusement, tu vois vraiment pas ?

on est bien d'accord qu'un point possède une abscisse x et une ordonnée y.

sur mon schema, Left est à la même ordonnée que Top, donc la composante y de Left est la même que Top, son abscisse, elle, est un peu en retrait, de la longeur de la ligne qui relie Top et Left. On a donc abscisse de Left = abscisse de Top - longeur de la ligne.

Imagine que ton point Top est situé en (500; 600) et que la longueur de la ligne est de 15 points, on aura les coordonnées de Left qui sont les suivantes (500-15; 600).

Pour le point right, tu remplaces tu raisonnes pareil en transposant sur l'axe vertical :

Right est à la même abscisse que top, et en dessous de lui d'une distance égale à la longueur de la ligne qui les sépare. on a donc Right (500;600+15)
Pourquoi j'ai mis +15 et pas -15 pour l'ordonnée ? car comme je t'ai dis, le coin haut gauche de ton écran est le coin (0;0), donc les ordonnées augmentent vers le bas !!
21/08/2008, 17h16
nouncyr

Oui j'avais compris mais ça c'est pour ton exemple de flèche...
Moi , il faudrait que ma flèche puisse s'orienter dans tout les sens donc ton exemple ne fonctionnera pas...
21/08/2008, 17h19
nouncyr

Citation:

Envoyé par Mongaulois

L =B-A que tu normalise

Oui d'accord mais comment je fais pour normaliser ???

Citation:

Pour N, pose Nx =1 et resoud Lx+Ny*Ly =0 =>Ny =-Lx/Ly; puis tu la normalise.

Pas compris
21/08/2008, 17h22
yan

Si tu regarde l'exemple de la clock,
c'est moins compliqué.

Tu peut utiliser rotate, translate,.... sur le QPainter qui va dessiner ta flêche.

voici un exemple.
C'est fait avec le support de QT3 dans Qt4, Il faut donc que tu adapte le nom des class Qt

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
 
#include <Qt3Support>
#include <QtGui>
class myItem : public Q3CanvasLine
{
public :
    myItem(Q3Canvas * canvas ) :Q3CanvasLine(canvas)
    {
    }
    void drawShape  ( QPainter & painter )
    {
        //dessine la ligne avec Q3CanvasLine::drawShape
        Q3CanvasLine::drawShape(painter);
 
        //Calcul le vecteur B-A
        QPoint L = endPoint()-startPoint ();
        //distance
        double distance = sqrt((double)L.x()*L.x() +L.y()*L.y());
        //sauvegarde l'etat du painter
        painter.save();
            //initialise le pen
            painter.setPen(pen());
 
            //position le painter pour que (0,0) correspond au point A
            painter.translate(startPoint());
 
            //oriente la direction du painter
            painter.rotate(180./3.14159265*atan2((double)L.y(),(double)L.x()));
 
            //dessine la fleche
            painter.drawLine(distance,0,distance-10,10);
            painter.drawLine(distance,0,distance-10,-10);
        //restore l'etat du painter
        painter.restore();
    }
};
 
int main(int argc,char ** argv)
{
	QApplication app(argc,argv);
 
	Q3CanvasView w(new Q3Canvas(800,600));
 
 
    myItem *item = new myItem(w.canvas());
    item->setPoints (10,10,100,200);
    item->setZ(1);
    item->show();
 
    item = new myItem(w.canvas());
    item->setPoints (100,200,0,200);
    item->setZ(1);
    item->show();
    w.show();
    return app.exec();
}

29/08/2008, 02h11
nouncyr

Merci beaucoup Mongaulois !

C'est exactement ce que je cherchais ...:king:
Je te remercie énormément !

@ bientot :yaisse2:
29/08/2008, 08h00
yan

Citation:

Envoyé par nouncyr

C'est exactement ce que je cherchais ...:king:

As tu compris le code?
29/08/2008, 11h53
nouncyr

Pas tout à fait ...

Je n'ai pas trop compris le translate et le rotate ...