Discussion :

[Péhelji]

Bonjour à tous,

Je fais appel à vos lumières pour m'aider à afficher sous Firemonkey un texte selon un angle donné, pour l'instant 90°.
Dans l'aide Embarcadero, il est suggérer d'utiliser TTextLayout, mais je ne vois pas bien comment faire pour obtenir une rotation de texte avant de le dessiner sur un canevas.

Merci d'avance pour votre aide.

[SergioMaster]

Bonjour,

Ma première réaction : Pour afficher un texte, utiliser la propriété RotationAngle et RotationCenter du TLabel ou du TText mais cela me parait tellement évident qu'il doit y avoir une question sous-jacente.
Ma seconde, quand je lis "dessiner sur un canevas", c'est de penser à Skia4Delphi et son TSkLabel. Étant encore novice dans le domaine de la manipulation/modification d'image je laisse le soin de lire la doc de ce composant.

P.S. un lien sur "Dans l'aide Embarcadero, il est suggéré d'utiliser TTextLayout" aurait certainement permis de mieux situer le contexte

[ALWEBER]

Voici un petit exemple

J'ai mis une petite bibliothèque te permettant de tourner/déplacer les objets avec la souris
Ce qui est important ce sont les dummies et leur position :

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
 
object Dummy1: TDummy
  Position.Y = -6.420
  Position.Z = -17.64
  RotationAngle.X = 340.0
  RotationAngle.Z = 90.0
  Width = 1.000000000000000000
  Height = 1.000000000000000000
  Depth = 1.000000000000000000
  TwoSide = True
  object Dummy2: TDummy
    Position.Y = 1.000000000000000000
    Width = 1.000000000000000000
    Height = 1.000000000000000000
    Depth = 1.000000000000000000
    object Layer3D1: TLayer3D
      Height = 1.000000000000000000
      Resolution = 200
      RotationAngle.X = 270.000000000000000000
      StyleLookup = 'backgroundstyle'
      Transparency = True
      Width = 1.000000000000000000
      object Label1: TLabel
        Position.X = 8.000000000000000000
        Position.Y = 64.000000000000000000
        Size.Width = 65.000000000000000000
        Size.Height = 17.000000000000000000
        Size.PlatformDefault = False
        Text = 'essai'
      end
    end
  end
end

[Péhelji]

Bonjour,

@SergioMaster :
L'utilisation des propriétés RotationAngle et RotationCenter d'un TText conviendrait parfaitement en effet si je devais utiliser un objet visuel, mais il s'agit pour moi de dessiner un texte inversé à 90° sur le canevas d'une Paintbox. Voici l'effet recherché : j'ai un programme qui affiche une activité mensuelle sous forme d'oscilloscope, et je souhaite faire apparaître la date à chaque nouvelle année (représentée par une zone en teinte grisâtre).



@AlWeber :
Merci pour ton exemple, instructif, mais comment puis-je vraiment en tirer profit pour parvenir au résultat décrit ci-dessus?

Merci une nouvelle fois à tous les deux pour vos réponses.

[Péhelji]

Bonsoir,

En travaillant mon code, je suis parvenu à une solution qui pourrait me convenir si je renonçais à faire pivoter mes années selon un angle donné.

Toutefois, encouragé par quelques recherches glanées sur Internet, j'ai adapté un bout de code utilisant TMatrix et, par tâtonnements successifs, je suis arrivé à ceci :



Reconnaissez que l'objectif est atteint ! Voici mon code :

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
  p1 := TPointF.Create(200, 150);
  p2 := p1;
 
  Canvas.Font.Size := 20;
 
  th := Canvas.TextHeight(S) / 2;
  tw := Canvas.TextWidth(S) / 2;
 
  Canvas.Fill.Color := TAlphaColors.Black;
  R := RectF(p1.X - tw, p1.Y - th, p1.X + tw, p1.Y + th);
  Canvas.FillText(R, S, false, 1, [], TTextAlign.Center, TTextAlign.Center);
 
  Canvas.Fill.Color := TAlphaColors.Maroon;
  R := RectF(p2.X - tw, p2.Y - th, p2.X + tw, p2.Y + th);
 
  OriginalMatrix := Canvas.Matrix;
 
  Matrix := Canvas.Matrix * TMatrix.CreateTranslation(-409, 55);
  Matrix := Matrix * TMatrix.CreateRotation(DegToRad(-90));
 
  Canvas.SetMatrix(Matrix);
  Canvas.FillText(R, S, False, 1, [], TTextAlign.Trailing, TTextAlign.Trailing);
 
  Canvas.SetMatrix(OriginalMatrix);

Sauf que... je suis arrivé au bon résultat en affectant arbitrairement -409 et 55 comme coordonnées d'une translation sur un point défini en X = 200 et Y = 150. Comment obtenir la même chose par programmation ?

En cherchant sur le forum, j'ai récupéré ici une solution proposée par Cirec que j'ai adapté à mon code de la façon suivante :

Code :

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

1
2
  Matrix := Canvas.Matrix * TMatrix.CreateTranslation(200, 150);
  Matrix := Matrix.Inverse * TMatrix.CreateRotation(DegToRad(-90)) * Matrix;

Et voilà ce que çà donne :



J'approche manifestement du résultat final, mais ma connaissance et ma compréhension des matrices sont bien trop limitées pour que je puisse l'atteindre sans votre aide.

[ShaiLeTroll]

Tu dois surement trouver le centre de ton texte par un FMX.Graphics.TCanvas.TextWidth et FMX.Graphics.TCanvas.TextHeight
Et Comme souvent, faut connaitre aussi le coin Top Left, qui se calcule à partir du centre, cela doit ça la bonne translation

D'ailleurs, à toi de voir si il est plus simple de faire d'abord la Translation puis la Rotation ou alors l'inverse (en inversement d'avance le X -> -Y )

[ALWEBER]

contenu du dfm en mode text. Tu peux faire un copier coller dans une fiche vierge du contenu si dessous. Il n'y a pas besoin de code. Les dummy remplacent les opérations de matrice

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
 
  object Viewport3D1: TViewport3D
    Align = Client
    Size.Width = 798.000000000000000000
    Size.Height = 480.000000000000000000
    Size.PlatformDefault = False
    object Light1: TLight
      Color = claWhite
      LightType = Directional
      SpotCutOff = 180.000000000000000000
      Position.X = -8.000000000000000000
      Position.Y = -6.000000000000000000
      RotationAngle.X = 315.000000000000000000
      Width = 1.000000000000000000
      Height = 1.000000000000000000
      Depth = 1.000000000000000000
      Quanternion = '(-0.382682263851166,0,0,0.923879981040955)'
    end
    object Dummy1: TDummy
      Position.Y = -6.420000076293945000
      Position.Z = -17.639999389648440000
      RotationAngle.X = 340.000000000000000000
      RotationAngle.Z = 90.000000000000000000
      Width = 1.000000000000000000
      Height = 1.000000000000000000
      Depth = 1.000000000000000000
      TwoSide = True
      Quanternion = '(-0.573576271533966,0,0,-0.819152057170868)'
      object Dummy2: TDummy
        Position.Y = 0.800000011920929000
        RotationAngle.Y = 270.000000000000000000
        Width = 1.000000000000000000
        Height = 1.000000000000000000
        Depth = 1.000000000000000000
        Quanternion = '(0,0.707106709480286,0,-0.707106828689575)'
        object Layer3D1: TLayer3D
          Height = 1.000000000000000000
          Resolution = 200
          RotationAngle.X = 270.000000000000000000
          StyleLookup = 'backgroundstyle'
          Transparency = True
          Width = 1.000000000000000000
          Quanternion = '(0.70710676908493,0,0,-0.70710676908493)'
          object Plane1: TPlane
            Position.X = 0.500000000000000000
            Position.Y = 0.740000009536743200
            Width = 1.000000000000000000
            Height = 0.200000002980232200
            Depth = 0.001000000047497451
            MaterialSource = LMS1
          end
          object Plane2: TPlane
            Position.X = 0.500000000000000000
            Position.Y = 0.550000011920929000
            Width = 1.000000000000000000
            Height = 0.200000002980232200
            Depth = 0.001000000047497451
            MaterialSource = LMS2
          end
          object Text3D1: TText3D
            Position.X = 0.500000000000000000
            Position.Y = 0.699999988079071000
            Position.Z = -0.100000001490116100
            Width = 0.600000023841857900
            Height = 0.079999998211860660
            Depth = 0.001000601798295975
            TwoSide = True
            Font.Size = 2.000000000000000000
            Font.StyleExt = {00070000000000000004000000}
            VertTextAlign = Leading
            Text = '2 0 2 3'
            WordWrap = False
            Flatness = 1.000000000000000000
            Sides = [Front]
            MaterialBackSource = LightMaterialSource1
            MaterialShaftSource = LMS1
            MaterialSource = LightMaterialSource1
          end
          object Text3D2: TText3D
            Position.X = 0.494978010654449500
            Position.Y = 0.507031559944152800
            Position.Z = -0.170234829187393200
            Width = 0.600000023841857900
            Height = 0.079999998211860660
            Depth = 0.001000601798295975
            TwoSide = True
            Font.Size = 2.000000000000000000
            Font.StyleExt = {00070000000000000004000000}
            VertTextAlign = Leading
            Text = '2 0 2 2'
            WordWrap = False
            Flatness = 1.000000000000000000
            Sides = [Front]
            MaterialBackSource = LightMaterialSource1
            MaterialShaftSource = LMS1
            MaterialSource = LightMaterialSource1
          end
          object Plane3: TPlane
            Position.X = 0.500000000000000000
            Position.Y = 0.259999990463256800
            Width = 1.000000000000000000
            Height = 0.400000005960464500
            Depth = 0.001000000047497451
            MaterialSource = LMS1
          end
        end
      end
    end
    object Light2: TLight
      Color = claWhite
      LightType = Directional
      SpotCutOff = 180.000000000000000000
      Position.X = -8.000000000000000000
      Position.Y = -4.000000000000000000
      RotationAngle.X = 45.000000000000000000
      Width = 1.000000000000000000
      Height = 1.000000000000000000
      Depth = 1.000000000000000000
      Quanternion = '(0.382683455944061,0,0,0.923879504203796)'
    end
  end
  object LightMaterialSource1: TLightMaterialSource
    Diffuse = xFFD58001
    Ambient = xFFFF0909
    Emissive = claNull
    Specular = xFFEB1111
    Shininess = 30
    Left = 104
    Top = 32
  end
  object LMS2: TLightMaterialSource
    Diffuse = xFF2F3840
    Ambient = claBlack
    Emissive = claNull
    Specular = xFF606060
    Shininess = 30
    Left = 104
    Top = 104
  end
  object LMS1: TLightMaterialSource
    Diffuse = xFF677D92
    Ambient = claBlack
    Emissive = claNull
    Specular = xFF606060
    Shininess = 30
    Left = 32
    Top = 208
  end

[Péhelji]

Bonsoir,

@ShaiLeTroll :

Tu dois surement trouver le centre de ton texte par un FMX.Graphics.TCanvas.TextWidth et FMX.Graphics.TCanvas.TextHeight

Lignes 6 et 7 : th := Canvas.TextHeight(S) / 2; tw := Canvas.TextWidth(S) / 2;

faut connaitre aussi le coin Top Left, qui se calcule à partir du centre

Ligne 14 : R := RectF(p2.X - tw, p2.Y - th, p2.X + tw, p2.Y + th);

à toi de voir si il est plus simple de faire d'abord la Translation puis la Rotation ou alors l'inverse

J'ai essayé différentes combinaisons en conservant les valeurs X et Y définies comme centre de rotation (X = 200 et Y = 150 dans mon exemple) et l'opération de rotation (exprimée par TMatrix.CreateRotation(DegToRad(-90))), je ne suis parvenu à aucun résultat satisfaisant.

Je pensais que la formule magique était :

Matrix := Matrix * TMatrix.CreateTranslation(-X, -Y);
Matrix := Matrix * TMatrix.CreateRotation(DegToRad(Angle));
Matrix := Matrix * TMatrix.CreateTranslation(X, Y);

Sauf que dans le cas de mon exemple cela ne fonctionne pas !

@AlWeber :

Merci pour ton fichier dfm/fmx que j'ai bien chargé dans une fiche vierge pour examiner le fonctionnement de tes dummies. Ce que je cherche à dupliquer par code correspond manifestement à RotationAngle sur l'axe Z. Cela paraît tellement simple en 3D! Pour autant, comment arriver au même résultat en 2D sans utiliser d'objets visuels ?

[SergioMaster]

Bonjour,

Bien que ce soit sur un sujet autre (les SVG ou plutôt FMX.Objects.TPath) j'ai tutoyé ces fameuses matrices, voir cette discussion en particulier les explications de Paul.


À essayer, coordonnées centre : 50,100, sans garanties

je n'ai aucun mérite, ce code se trouve dans un forum en anglais

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
 
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
const
  S = 'Hello World';
var
  R: TRectF;
  SaveMatrix: TMatrix;
  Matrix: TMatrix;
begin
  PaintBox1.Canvas.Fill.Color := TAlphaColors.Black;
  R := RectF(-Canvas.TextWidth(S), -Canvas.TextHeight(S), 0, 0);
  SaveMatrix := PaintBox1.Canvas.Matrix;
// Rotation 90° par rapport au 0 = Horizontal donc -90
  Matrix := CreateRotationMatrix(DegToRad(-90));
// coordonnées
  Matrix.m31 := 50;   
  Matrix.m32 := 100; 
  PaintBox1.Canvas.MultyMatrix(Matrix);
  PaintBox1.Canvas.FillText(R, S, False, 1, [], TTextAlign.taTrailing,
    TTextAlign.taTrailing);
  PaintBox1.Canvas.SetMatrix(SaveMatrix);
end;

Plus général

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
procedure DrawRotatedText(Canvas: TCanvas; const P: TPointF; RadAngle: Single;
  const S: String; HTextAlign, VTextAlign: TTextAlign);
var
  W: Single;
  H: Single;
  R: TRectF;
  SaveMatrix: TMatrix;
  Matrix: TMatrix;
begin
  W := Canvas.TextWidth(S);
  H := Canvas.TextHeight(S);
  case HTextAlign of
    TTextAlign.taCenter:   R.Left := -W / 2;
    TTextAlign.taLeading:  R.Left := 0;
    TTextAlign.taTrailing: R.Left := -W;
  end;
  R.Width := W;
  case VTextAlign of
    TTextAlign.taCenter:   R.Top := -H / 2;
    TTextAlign.taLeading:  R.Top := 0;
    TTextAlign.taTrailing: R.Top := -H;
  end;
  R.Height := H;
  SaveMatrix := Canvas.Matrix;
  Matrix := CreateRotationMatrix(RadAngle);
  Matrix.m31 := P.X;
  Matrix.m32 := P.Y;
  Canvas.MultyMatrix(Matrix);
  Canvas.FillText(R, S, False, 1, [], HTextAlign, VTextAlign);
  Canvas.SetMatrix(SaveMatrix);
end;
 
procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
begin
  PaintBox1.Canvas.Fill.Color := TAlphaColors.Black;
  DrawRotatedText(PaintBox1.Canvas, PointF(50, 100), DegToRad(-90),
    'Hello world', TTextAlign.taTrailing, TTextAlign.taTrailing);
end;

[ALWEBER]

@AlWeber :

Merci pour ton fichier dfm/fmx que j'ai bien chargé dans une fiche vierge pour examiner le fonctionnement de tes dummies. Ce que je cherche à dupliquer par code correspond manifestement à RotationAngle sur l'axe Z. Cela paraît tellement simple en 3D! Pour autant, comment arriver au même résultat en 2D sans utiliser d'objets visuels ?

Tu peux faire une copie d'une partie de la fenêtre de l'application et en faire une image 2D. Je peux te passer les quelques lignes de code qui réalise cette opération

[Péhelji]

Bonsoir,

Alors, félicitations les amis, objectif atteint avec le second bout de code de Serge !
Voici le résultat en prenant successivement (150, 100) et (250, 200) comme TPointF de rotation :



Le pire dans tout çà, c'est que, dans mes "recherches glanées sur Internet", j'avais récupéré ce bout de code sur le fameux forum en anglais. En le copiant/collant dans l'IDE, celui-ci l'avait immédiatement refusé, ne reconnaissant pas les procédures CreateRotationMatrix et MultyMatrix, qui étaient peut-être valables en 2014, mais plus sous Delphi 10.3.3 ! J'avais bien trouvé ce qui remplaçait la première procédure, mais pas la seconde.

J'avais aussi consulté la discussion entre Serge et Paul sur les matrices, mais je m'étais senti un peu largué du fait de mes lacunes en mathématiques.

Donc, pour servir de référence, en modifiant légèrement les deux procédures proposées pour les mettre à jour, voici comment afficher un texte selon un angle sous Firemonkey :

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
    procedure DrawRotatedText(Canvas: TCanvas; const P: TPointF; RadAngle: Single; const S: String; HTextAlign, VTextAlign: TTextAlign);
    var
      W: Single;
      H: Single;
      R: TRectF;
      SaveMatrix: TMatrix;
      Matrix: TMatrix;
    begin
      W := Canvas.TextWidth(S);
      H := Canvas.TextHeight(S);
      case HTextAlign of
        TTextAlign.taCenter:   R.Left := -W / 2;
        TTextAlign.taLeading:  R.Left := 0;
        TTextAlign.taTrailing: R.Left := -W;
      end;
      R.Width := W;
      case VTextAlign of
        TTextAlign.taCenter:   R.Top := -H / 2;
        TTextAlign.taLeading:  R.Top := 0;
        TTextAlign.taTrailing: R.Top := -H;
      end;
      R.Height := H;
      SaveMatrix := Canvas.Matrix;
 
      // Mise à jour des deux procédures
      Matrix := CreateRotation(RadAngle);
      Matrix.m31 := P.X;
      Matrix.m32 := P.Y;
      Canvas.MultiplyMatrix(Matrix);
 
      Canvas.FillText(R, S, False, 1, [], HTextAlign, VTextAlign);
      Canvas.SetMatrix(SaveMatrix);
    end;
 
    procedure TForm1.PaintBox1Paint(Sender: TObject; Canvas: TCanvas);
    begin
      PaintBox1.Canvas.Fill.Color := TAlphaColors.Black;
      // Positionner TTextAlign sur Center
      DrawRotatedText(PaintBox1.Canvas, PointF(150, 100), DegToRad(-90), '2-0-2-0-à-2-0-2-2', TTextAlign.Center, TTextAlign.Center);
    end;

Je vous remercie très sincèrement pour l'aide que vous m'avez apportée, et vous souhaite à tous un bon dimanche !