Discussion :

[SergioMaster]

Bonjour,

plus ou moins promis voilà le problème de la rotation d'un élément plus ou moins résolu, mais il va falloir m'expliquer ce que j'ai fini par trouver après moult tests

dans le projet (réduit) joint dans le zip je dessine cette fameuse hermine bretonne dont le fichier SVG est le suivant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1350" height="900">
	<rect width="1350" height="900" fill="#aaa"/>
 
	<path d="M 300,167.5 l -9,-13.5 l 9,-22.5 l 9,22.5 z" fill="#000"/>
	<path d="M 300,167.5 l -9,-13.5 l 9,-22.5 l 9,22.5 z" fill="#000" transform="rotate(-90 300,167.5)"/>
	<path d="M 300,167.5 l -9,-13.5 l 9,-22.5 l 9,22.5 z" fill="#000" transform="rotate(90 300,167.5)"/>
        <path d="M 300,167.5 l 40.5,99 l -31.5,-13.5 l -9,18 l -9,-18 l -31.5,13.5 z" fill="#000"/>
 
 </svg>

Par tâtonnements successifs j'ai bien fini par l'obtenir en utilisant le code suivant

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
 
// je ne m'occupe pas du rectangle blanc
procedure TForm80.btnHermineClick(Sender: TObject);
var s : String;
    n : single;
    aP,al,ar : Tpath;  // ap triangle haut, al triangle gauche, ar triangle droit
    M : TMatrix;
 
begin
 ap:=Tpath.Create(Self);
 al:=Tpath.Create(Self);
 ar:=Tpath.Create(Self);
 try
 
  aP.Data.Data:='M 300,167.5 l -9,-13.5 l 9,-22.5 l 9,22.5 z';
  al.Data.Data:=ap.Data.Data;
  ar.Data.Data:=ap.Data.Data;
 
  Path1.Fill.Color:=Talphacolors.Black;
  Path1.Data.Data:='M 300,167.5 l 40.5,99 l -31.5,-13.5 l -9,18 l -9,-18 l -31.5,13.5 z';
 
  Path1.Data.AddPath(ap.data);
 
    m:=Tmatrix.CreateTranslation(-300,-167.5);
    al.data.applymatrix(m);
    M := TMatrix.CreateRotation(30);   // angle normalement 90  
    al.data.applymatrix(m);
    M:=TMatrix.CreateTranslation(300,167.5);
    al.data.applymatrix(m);
    Path1.Data.AddPath(al.data);
 
 
    m:=Tmatrix.CreateTranslation(-300,-167.5);
    ar.data.applymatrix(m);
    M := TMatrix.CreateRotation(-30);    // // angle normalement -90  
    ar.data.applymatrix(m);
    M:=TMatrix.CreateTranslation(300,167.5);
    ar.data.applymatrix(m);
    Path1.Data.AddPath(ar.data);
  finally
   ap.free;
   al.Free;
   ar.Free;
 end;
end;

Comme vous le constatez, j'applique trois étapes, un premier déplacement , négatif des coordonnées indiquées transform="rotate(-90 300,167.5)"
procède ensuite à une rotation mais avec la valeur 30 !
Puis refait un déplacement aux coordonnées

N.B. Le code est simplifiable en multipliant les matrices

Code :

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

1
2
3
4
5
6
7
8
 
    M:=Tmatrix.CreateTranslation(-300,-167.5);
    M := M * TMatrix.CreateRotation(30);   // angle normalement 90  
    M := M* TMatrix.CreateTranslation(300,167.5);
    // ou encore
   //    M:=TMatrix.CreateTranslation(-300,-167.5) * TMatrix.CreateRotation(30) * TMatrix.CreateTranslation(300,167.5); 
    al.data.applymatrix(M);
    Path1.Data.AddPath(al.data);

simplifiant le "mystère" à l'explication de la transformation de 90° en 30 (expression en ?)
Ma trigonométrie est loin ...

[Edit] en fait je crois que convertir l'angle en radian est la solution

[SergioMaster]

C'était bien des radians qui étaient attendu dans la fonction CreateRotation

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
procedure TForm80.btnHermineClick(Sender: TObject);
var aP,al,ar : Tpath;
    M : TMatrix;
 
begin
 ap:=Tpath.Create(Self);
 al:=Tpath.Create(Self);
 ar:=Tpath.Create(Self);
 try
 
    aP.Data.Data:='M 300,167.5 l -9,-13.5 l 9,-22.5 l 9,22.5 z';
    al.Data.Data:=ap.Data.Data;
    ar.Data.Data:=ap.Data.Data;
 
    Path1.Fill.Color:=Talphacolors.Black;
    Path1.Data.Data:='M 300,167.5 l 40.5,99 l -31.5,-13.5 l -9,18 l -9,-18 l -31.5,13.5 z';
 
    Path1.Data.AddPath(ap.data);
 
    m:=Tmatrix.CreateTranslation(-300,-167.5)*TMatrix.CreateRotation(DegToRad(90))*TMatrix.CreateTranslation(300,167.5);
    al.data.applymatrix(m);
    Path1.Data.AddPath(al.data);
 
 
    m:=Tmatrix.CreateTranslation(-300,-167.5)*TMatrix.CreateRotation(DegToRad(-90))*TMatrix.CreateTranslation(300,167.5);
    ar.data.applymatrix(m);
    Path1.Data.AddPath(ar.data);
  finally
   ap.free;
   al.Free;
   ar.Free;
 end;
 
end;

Tout cela me donne déjà les idées nécessaires pour gérer les groupes (<g> </g>) des fichiers SVG

[anapurna]

salut

est tu sur que les translation soit nécessaire ?
cela me parait bizarre d’être obligé de faire 2 translation qui s'annule ?

j'ai cru voir deux propriété intéressante : RotationCenter et RotationAngle
ne pense tu pas que c'est celle-ci qui devrais être utilisé

[SergioMaster]

est tu sur que les translation soit nécessaire ?
cela me parait bizarre d’être obligé de faire 2 translations qui s'annule ?

C'est bien pour cela que j'ai posté, cela me paraissait bizarre mais sans ça, voilà ce que cela donne

j'ai cru voir deux propriétés intéressantes : RotationCenter et RotationAngle
ne penses-tu pas que c'est celle-ci qui devrais être utilisé

Je ne fais pas "tourner" le composant TPath mais les Datas contenues (TPath.data) donc non rotationcenter et rotationangle ne s'applique pas, elles s'appliqueraient si je voulais faire tourner l'image entière

Code :

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

1
2
3
4
5
6
7
procedure TForm80.btnRotationPathClick(Sender: TObject);
begin
Path1.RotationAngle:=90;
// par défaut 
// Path1.RotationCenter.x:=0.5;
// Path1.RotationCenter.Y:=0.5;
end;

[anapurna]

salut

je voyais plus un truc de ce genre là

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
 
procedure TForm80.RotationPath(Apath : Tpath;Origine : Tpoint;Angle : Double);
begin
  Apath.RotationCenter.x:=Origine.x;
  Apath.RotationCenter.Y:=Origine.y;
  Apath.RotationAngle:=DegToRad(Angle);
// par défaut 
end;
 
procedure TForm80.btnHermineClick(Sender: TObject);
var aP,al,ar : Tpath;
begin
 ap:=Tpath.Create(Self);
 al:=Tpath.Create(Self);
 ar:=Tpath.Create(Self);
 try
 
    aP.Data.Data:='M 300,167.5 l -9,-13.5 l 9,-22.5 l 9,22.5 z';
    al.Data.Data:=ap.Data.Data;
    ar.Data.Data:=ap.Data.Data;
 
    Path1.Fill.Color:=Talphacolors.Black;
    Path1.Data.Data:='M 300,167.5 l 40.5,99 l -31.5,-13.5 l -9,18 l -9,-18 l -31.5,13.5 z';
    Path1.Data.AddPath(ap.data);
 
    RotationPath(al,Tpoint(300,167.5),90);
    Path1.Data.AddPath(al.data);
 
    RotationPath(ar,Tpoint(300,167.5),-90);
    Path1.Data.AddPath(ar.data);
  finally
   ap.free;
   al.Free;
   ar.Free;
 end;
end;

mais bon j'ai pas testé

[Cirec]

Bonjour,

j'ai testé de mon coté et j'ai fait 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
15
16
17
18
  Path1.Fill.Color:=Talphacolors.Black;
  Path1.Data.Data:='M 300,167.5 l 40.5,99 l -31.5,-13.5 l -9,18 l -9,-18 l -31.5,13.5 z';
 
  Path1.Data.AddPath(ap.data);
 
    M := TMatrix.CreateTranslation(300, 167.5);
    M := M.Inverse * TMatrix.CreateRotation(DegToRad(90)) * M;
 
    al.data.applymatrix(m);
    Path1.Data.AddPath(al.data);
 
    ar.data.applymatrix(M.Inverse);
    Path1.Data.AddPath(ar.data);
  finally
   ap.free;
   al.Free;
   ar.Free;
 end;

qui donne le même résultat

Cordialement,

@+