Differenze tra le versioni di "Ruotare il testo in una DrawingArea"

Da Gambas-it.org - Wikipedia.
 
(4 versioni intermedie di uno stesso utente non sono mostrate)
Riga 1: Riga 1:
==Il Metodo "Paint.Rotate()" quale motore della rotazione di ciò che viene disegnato==
+
Il seguente codice <SUP>&#91;[[#Note|nota 1]]&#93;</sup> effettua la rotazione di un testo in un'Area di Disegno. In particolare esso dimostra che la rotazione è data dai valori presenti nei metodi ''Traslate'' relativi alle misure dell'area di disegno e a quelle del testo. E' come se il fulcro di Translate agisse da vortice: a seconda di dove si pone il testo nel vortice il testo ruoterà. <B><SUP>&#91;[[#Note|nota 2]]&#93;</sup></b>
La rotazione di uno o più caratteri, come di ogni altro elemento da disegnare all'interno di un Oggetto grafico disegnabile ("DrawingArea", "Image", "Picture"), è effettuata attraverso il il Metodo ".Rotate()" della Classe "Paint".
 
 
 
La rotazione con il Metodo ".Rotate()" di un elemento da disegnare avviene attorno al vertice individuato dalle coordinate x=0, y=0 dell'Oggetto grafico disegnabile, ossia attorno al vertice superiore sinistro dell'Oggetto, come agevolmente dimostrato dal seguente esempio, nel quale si farà ruotare un testo:
 
Private DrawingArea1 As DrawingArea
 
Private Slider1 As Slider
 
 
 
 
 
'''Public''' Sub Form_Open()
 
 
 
  With Me
 
    .W = Screen.AvailableWidth * 0.5
 
    .H = Screen.AvailableHeight * 0.5
 
    .Center
 
  End With
 
  With DrawingArea1 = New DrawingArea(Me) As "DrawingArea1"
 
    .X = 0
 
    .Y = 0
 
    .W = Me.W * 0.8
 
    .H = Me.H
 
    .Background = Color.Orange
 
  End With
 
  With Slider1 = New Slider(Me) As "Slider1"
 
    .X = Me.W * 0.85
 
    .Y = Me.H * 0.02
 
    .W = Me.W * 0.1
 
    .H = Me.H * 0.95
 
    .MinValue = 0
 
    .MaxValue = 360
 
  End With
 
 
 
'''End'''
 
 
 
'''Public''' Sub DrawingArea1_Draw()
 
 
 
  Dim testo As String = "Gambas " & CStr(Slider1.Value) & "°"
 
 
 
  With Paint
 
<FONT Color=gray>' ''Impone la rotazione di tutto ciò che viene disegnato a seguire:''</font>
 
    <FONT Color=#B22222><B>.Rotate</b></font>(Rad(-Slider1.Value))
 
    .Brush = Paint.Color(Color.Yellow)
 
    .Font = Font["Sans Serif, 22"]
 
<FONT Color=gray>' ''Il testo ruoterà comunque intorno al suo centro verticale e orizzontale:''</font>
 
    .DrawText(testo, -Paint.TextExtents(testo).W / 2, Paint.TextExtents(testo).H / 2, -.TextExtents(testo).W / 2, -.TextExtents(testo).H / 2, Align.Center)
 
<FONT Color=gray>' ''oppure anche così:''
 
' '''.DrawText(testo, -.Font.TextWidth(testo) / 2, -.Font.TextHeight(testo) / 2, .Font.TextWidth(testo), .Font.TextHeight(testo), Align.Center)'''</font>
 
    .End
 
  End With
 
 
 
'''End'''
 
 
 
'''Public''' Sub Slider1_Change()
 
 
 
  DrawingArea1.Refresh
 
 
 
'''End'''
 
 
 
==Modificare la posizione del testo da disegnare sulla superficie dell'Oggetto grafico utilizzato==
 
Per modificare la posizione (ossia le coordinate) standard dell'elemento da disegnare sulla superficie del suo Oggetto grafico, si dovrà utilizzare il Metodo ".Translate()" della Classe "Paint".
 
<BR>Nel seguente esempio, simile al precedente, il testo ruoterà intorno al suo centro, posto al centro della "DrawingArea":
 
Private DrawingArea1 As DrawingArea
 
Private Slider1 As Slider
 
 
 
 
 
'''Public''' Sub Form_Open()
 
 
 
  With Me
 
    .W = Screen.AvailableWidth * 0.5
 
    .H = Screen.AvailableHeight * 0.5
 
    .Center
 
  End With
 
  With DrawingArea1 = New DrawingArea(Me) As "DrawingArea1"
 
    .X = 0
 
    .Y = 0
 
    .W = Me.W * 0.8
 
    .H = Me.H
 
    .Background = Color.Orange
 
  End With
 
  With Slider1 = New Slider(Me) As "Slider1"
 
    .X = Me.W * 0.85
 
    .Y = Me.H * 0.02
 
    .W = Me.W * 0.1
 
    .H = Me.H * 0.95
 
    .MinValue = 0
 
    .MaxValue = 360
 
  End With
 
 
 
'''End'''
 
 
 
'''Public''' Sub DrawingArea1_Draw()
 
 
 
  Dim testo As String = "Gambas " & CStr(Slider1.Value) & "°"
 
 
 
  With Paint
 
<FONT Color=gray>' ''Impone la rotazione del testo, disegnato, sempre al centro della "DrawingARea":''</font>
 
    <FONT Color=#B22222><B>.Translate</b></font>(DrawingArea1.W / 2, DrawingArea1.H / 2)
 
    .Rotate(Rad(-Slider1.Value))
 
    .Brush = Paint.Color(Color.Yellow)
 
    .Font = Font["Sans Serif, 22"]
 
<FONT Color=gray>' ''Il testo ruoterà comunque intorno al suo centro verticale e orizzontale:''</font>
 
    .DrawText(testo, -Paint.TextExtents(testo).W / 2, Paint.TextExtents(testo).H / 2, -.TextExtents(testo).W / 2, -.TextExtents(testo).H / 2, Align.Center)
 
<FONT Color=gray>' ''oppure anche così:''
 
' '''.DrawText(testo, -.Font.TextWidth(testo) / 2, -.Font.TextHeight(testo) / 2, .Font.TextWidth(testo), .Font.TextHeight(testo), Align.Center)'''</font>
 
    .End
 
  End With
 
 
 
'''End'''
 
 
 
'''Public''' Sub Slider1_Change()
 
 
 
  DrawingArea1.Refresh
 
 
 
'''End'''
 
 
 
 
 
===Un esempio più complesso con diverse forme di rotazione del testo===
 
Il seguente codice <SUP>&#91;[[#Note|nota 1]]&#93;</sup> effettua la rotazione di un testo in un'Area di Disegno. In particolare esso dimostra che la rotazione è data dai valori presenti nei metodi ''Traslate'' relativi alle misure dell'area di disegno e a quelle del testo. E' come se il fulcro di Translate agisse da vortice: a seconda di dove si pone il testo nel vortice il testo ruoterà.    
 
  
 
Per poter provare questo codice occorre creare un'applicazione grafica con un'area di disegno (''DrawingArea'') di almeno 450 per lato e denominarla "''da''".
 
Per poter provare questo codice occorre creare un'applicazione grafica con un'area di disegno (''DrawingArea'') di almeno 450 per lato e denominarla "''da''".
Riga 149: Riga 33:
 
   
 
   
 
        
 
        
  '''Public''' Sub Form_Open()     
+
  Public Sub Form_Open()     
 
        
 
        
 
   sTesto = "Testo qualsiasi"   
 
   sTesto = "Testo qualsiasi"   
 
   Me.Center       
 
   Me.Center       
 
        
 
        
  '''End''' 
+
  End
 
        
 
        
 
   
 
   
  '''Public''' Sub da_Draw()
+
  Public Sub da_Draw()
 
        
 
        
 
  <FONT color=gray>' ''Se il booleano "bOk" è "vero", raccoglie tutti i dati e le misure occorrenti''   
 
  <FONT color=gray>' ''Se il booleano "bOk" è "vero", raccoglie tutti i dati e le misure occorrenti''   
Riga 171: Riga 55:
 
              
 
              
 
       Select Case sPos   
 
       Select Case sPos   
       <FONT color=gray>' ''Se la rotazione è centrale, posiziona il testo al centro dell'area''
+
       <FONT color=gray>' ''Se la rotazione è centrale, posiziona il testo al centro dell'area di disegno così come le misure di partenza e arrivo e siccome la  scritta ruota su se stessa da al raggio del cerchio mezza lunghezza del testo:''</font>
      ' ''di disegno così come le misure di partenza e arrivo e siccome la  scritta''
 
      ' ''ruota su se stessa da al raggio del cerchio mezza lunghezza del testo:''</font>
 
 
         Case "Center"   
 
         Case "Center"   
 
           x = CFloat((da.W / 2) - (iLarg / 2))   
 
           x = CFloat((da.W / 2) - (iLarg / 2))   
Riga 179: Riga 61:
 
           fRaggio = CFloat(iLarg / 2)               
 
           fRaggio = CFloat(iLarg / 2)               
 
                  
 
                  
           <FONT color=gray>' ''Se rotazione è di testa, posiziona l'inizio del testo al centro''
+
           <FONT color=gray>' ''Se rotazione è di testa, posiziona l'inizio del testo al centro dell'area di disegno così come le misure di partenza e arrivo; e siccome la scritta ruota come un raggio, dà al raggio del cerchio la lunghezza del testo:''</font>
          ' ''dell'area di disegno così come le misure di partenza e arrivo; e siccome la scritta'' 
 
          ' ''ruota come un raggio, dà al raggio del cerchio la lunghezza del testo:''</font>
 
 
           Case "Testa"   
 
           Case "Testa"   
 
             x = CFloat(da.W / 2)   
 
             x = CFloat(da.W / 2)   
Riga 187: Riga 67:
 
             fRaggio = CFloat(iLarg)               
 
             fRaggio = CFloat(iLarg)               
 
                  
 
                  
           <FONT color=gray>' ''Se rotazione è di coda, posiziona la fine del testo al centro dell'area'' 
+
           <FONT color=gray>' ''Se rotazione è di coda, posiziona la fine del testo al centro dell'area di disegno così come le misure di partenza e arrivo; e siccome la scritta ruota come un raggio dà al raggio del cerchio la lunghezza del testo:''</font>
          ' ''di disegno così come le misure di partenza e arrivo; e siccome la scritta''
 
          ' ''ruota come un raggio dà al raggio del cerchio la lunghezza del testo:''</font>
 
 
           Case "Coda"   
 
           Case "Coda"   
 
             x = CFloat((da.W / 2) - iLarg)   
 
             x = CFloat((da.W / 2) - iLarg)   
Riga 195: Riga 73:
 
             fRaggio = CFloat(iLarg)               
 
             fRaggio = CFloat(iLarg)               
 
                  
 
                  
           <FONT color=gray>' ''Se rotazione è esterna, posiziona l'inizio del testo a fine raggio del cerchio,
+
           <FONT color=gray>' ''Se rotazione è esterna, posiziona l'inizio del testo a fine raggio del cerchio, sempre al centro dell'area di disegno le misure di partenza e arrivo:''</font>
          ' ''sempre al centro dell'area di disegno le misure di partenza e arrivo:''</font>
 
 
           Case "Esterna"   
 
           Case "Esterna"   
 
             x = CFloat((da.W / 2) + (iLarg / 2))   
 
             x = CFloat((da.W / 2) + (iLarg / 2))   
Riga 228: Riga 105:
 
   Endif
 
   Endif
 
        
 
        
  '''End''' 
+
  End
 
        
 
        
 
        
 
        
  '''Public''' Sub ridimensiona(size As Float) As Float   
+
  Public Sub ridimensiona(size As Float) As Float   
 
        
 
        
 
  <FONT color=gray>' ''Proporziona il testo nell'area di disegno:''</font>
 
  <FONT color=gray>' ''Proporziona il testo nell'area di disegno:''</font>
Riga 240: Riga 117:
 
   Endif     
 
   Endif     
 
        
 
        
  '''End''' 
+
  End
 
        
 
        
 
   
 
   
  '''Public''' Sub attivaDisegno()   
+
  Public Sub attivaDisegno()   
 
        
 
        
 
  <FONT color=gray>' ''Porta a vero bOk, pulisce l'area di disegno e attiva il disegno:''</font>
 
  <FONT color=gray>' ''Porta a vero bOk, pulisce l'area di disegno e attiva il disegno:''</font>
Riga 250: Riga 127:
 
   da.Refresh   
 
   da.Refresh   
 
        
 
        
  '''End''' 
+
  End
 
        
 
        
 
        
 
        
  '''Public''' Sub btCentro_Click()   
+
  Public Sub btCentro_Click()   
 
      
 
      
 
  <FONT color=gray>' ''Indica il tipo di rotazione, attiva il disegno:''</font>
 
  <FONT color=gray>' ''Indica il tipo di rotazione, attiva il disegno:''</font>
Riga 259: Riga 136:
 
   attivaDisegno()   
 
   attivaDisegno()   
 
        
 
        
  '''End'''
+
  End
 
    
 
    
 
        
 
        
  '''Public''' Sub btTesta_Click()   
+
  Public Sub btTesta_Click()   
 
        
 
        
 
  <FONT color=gray>' ''Indica il tipo di rotazione, attiva il disegno:''</font>
 
  <FONT color=gray>' ''Indica il tipo di rotazione, attiva il disegno:''</font>
Riga 268: Riga 145:
 
   attivaDisegno()   
 
   attivaDisegno()   
 
        
 
        
  '''End''' 
+
  End
 
        
 
        
 
   
 
   
  '''Public''' Sub btCoda_Click()   
+
  Public Sub btCoda_Click()   
 
   
 
   
 
  <FONT color=gray>' ''Indica il tipo di rotazione, attiva il disegno:''</font>
 
  <FONT color=gray>' ''Indica il tipo di rotazione, attiva il disegno:''</font>
Riga 277: Riga 154:
 
   attivaDisegno()   
 
   attivaDisegno()   
 
        
 
        
  '''End''' 
+
  End
 
        
 
        
 
        
 
        
  '''Public''' Sub btEsterna_Click()   
+
  Public Sub btEsterna_Click()   
 
        
 
        
 
  <FONT color=gray>' ''Indica il tipo di rotazione, attiva il disegno:''</font>
 
  <FONT color=gray>' ''Indica il tipo di rotazione, attiva il disegno:''</font>
Riga 286: Riga 163:
 
   attivaDisegno()   
 
   attivaDisegno()   
 
        
 
        
  '''End''' 
+
  End
 
        
 
        
 
        
 
        
  '''Public''' Sub btLeft_Click()   
+
  Public Sub btLeft_Click()   
 
        
 
        
 
  <FONT color=gray>' ''Ogni volta che si agisce sul tasto incrementa il valore di un ottavo di giro:''
 
  <FONT color=gray>' ''Ogni volta che si agisce sul tasto incrementa il valore di un ottavo di giro:''
Riga 299: Riga 176:
 
   da.Refresh   
 
   da.Refresh   
 
        
 
        
  '''End'''
+
  End
 
    
 
    
 
        
 
        
  '''Public''' Sub btRight_Click()   
+
  Public Sub btRight_Click()   
 
   
 
   
 
  <FONT color=gray>' ''Ogni volta che si agisce sul tasto decrementa il valore di un ottavo di giro:''
 
  <FONT color=gray>' ''Ogni volta che si agisce sul tasto decrementa il valore di un ottavo di giro:''
Riga 312: Riga 189:
 
   da.Refresh   
 
   da.Refresh   
 
        
 
        
  '''End'''
+
  End
  
  
  
----
 
 
=Note=
 
=Note=
 
[1] Il codice è stato realizzato dall'utente [http://www.gambas-it.org/smf/index.php?action=profile;u=1249''Gianluigi''] del forum ''www.gambas-it.org''.
 
[1] Il codice è stato realizzato dall'utente [http://www.gambas-it.org/smf/index.php?action=profile;u=1249''Gianluigi''] del forum ''www.gambas-it.org''.
  
[2] Vedasi anche questa pagina della WIKI: http://www.gambas-it.org/wiki/index.php?title=Ruotare_un_testo_secondo_i_raggi_di_una_circonferenza_ideale
+
[2] Si vedano anche queste pagine della WIKI:
 +
<BR>- [[Ruotare qualsiasi elemento da disegnare in una DrawingArea]]
 +
<BR>- [[Curvare il testo in una DrawingArea]]

Versione attuale delle 06:01, 27 giu 2024

Il seguente codice [nota 1] effettua la rotazione di un testo in un'Area di Disegno. In particolare esso dimostra che la rotazione è data dai valori presenti nei metodi Traslate relativi alle misure dell'area di disegno e a quelle del testo. E' come se il fulcro di Translate agisse da vortice: a seconda di dove si pone il testo nel vortice il testo ruoterà. [nota 2]

Per poter provare questo codice occorre creare un'applicazione grafica con un'area di disegno (DrawingArea) di almeno 450 per lato e denominarla "da".

Quindi aggiungere alla MainForm sei pulsanti (Button) denominati rispettivamente:

btCentro (disegna la scritta che ruoterà sul proprio asse centrale)

btTesta (disegna la scritta che ruoterà facendo perno sull'inizio del testo)

btCoda (disegna la scritta che ruoterà facendo perno sulla fine del testo)

btEsterna (disegna la scritta che ruoterà intorno al cerchio)

btLeft (ruota la scritta in senso antiorario)

btRight (ruota la scritta in senso orario)

Private fRaggio As Float  ' Memorizza la lunghezza del raggio del cerchio entro cui ruota la scritta.
Private xArc As Float     ' Memorizza il centro del cerchio.
Private yArc As Float     ' Idem.
Private x As Float        ' Memorizza l'inizio della scritta.
Private y As Float        ' Idem.
Private iAlt As Integer   ' Memorizza l'altezza della scritta.
Private iLarg As Integer  ' Memorizza la larghezza della scritta.
Private sTesto As String  ' Memorizza la scritta.
Private fAngolo As Float  ' Memorizza i gradi dell'angolo.
Private sPos As String    ' Memorizza il tipo di rotazione se con perno centrale, di testa o di coda.
Private fSopra1 As Float  ' Memorizza la posizione di partenza orizzontale della rotazione.
Private fSopra2 As Float  ' Memorizza la posizione di partenza verticale della rotazione.
Private fSotto1 As Float  ' Memorizza la posizione di arrivo orizzontale della rotazione.
Private fSotto2 As Float  ' Memorizza la posizione di arrivo verticale della rotazione. 
Private bOk As Boolean    ' Booleano che se vero consete il disegno sulla DrawigArea.

      
Public Sub Form_Open()    
     
 sTesto = "Testo qualsiasi"   
 Me.Center      
      
End
     

Public Sub da_Draw()
     
' Se il booleano "bOk" è "vero", raccoglie tutti i dati e le misure occorrenti  
' per poter disegnare testo e cerchio nell'area di disegno:
        
  If bOk Then
        
    With Paint  
      .Begin(da)  
      .Font.Size = ridimensiona(22)  
      iLarg = .Font.RichTextWidth(sTesto)  
      iAlt = .Font.RichTextHeight(sTesto)  
            
      Select Case sPos  
      ' Se la rotazione è centrale, posiziona il testo al centro dell'area di disegno così come le misure di partenza e arrivo e siccome la  scritta ruota su se stessa da al raggio del cerchio mezza lunghezza del testo:
        Case "Center"  
          x = CFloat((da.W / 2) - (iLarg / 2))  
          y = CFloat((da.H / 2) - (iAlt / 2))  
          fRaggio = CFloat(iLarg / 2)              
                
          ' Se rotazione è di testa, posiziona l'inizio del testo al centro dell'area di disegno così come le misure di partenza e arrivo; e siccome la scritta ruota come un raggio, dà al raggio del cerchio la lunghezza del testo:
         Case "Testa"   
           x = CFloat(da.W / 2)  
           y = CFloat((da.H / 2) - (iAlt / 2))  
           fRaggio = CFloat(iLarg)              
               
         ' Se rotazione è di coda, posiziona la fine del testo al centro dell'area di disegno così come le misure di partenza e arrivo; e siccome la scritta ruota come un raggio dà al raggio del cerchio la lunghezza del testo:
          Case "Coda"   
            x = CFloat((da.W / 2) - iLarg)  
            y = CFloat((da.H / 2) - (iAlt / 2))  
            fRaggio = CFloat(iLarg)              
                
          ' Se rotazione è esterna, posiziona l'inizio del testo a fine raggio del cerchio, sempre al centro dell'area di disegno le misure di partenza e arrivo:
          Case "Esterna"  
            x = CFloat((da.W / 2) + (iLarg / 2))  
            y = CFloat((da.H / 2) - (iAlt / 2))  
            fRaggio = CFloat(iLarg / 2)  
                 
        End Select  
        ' In questa dimostrazione il fulcro (vortice) è sempre il centro dell'area di disegno:
        xArc = CFloat((da.W / 2))  
        yArc = CFloat(da.H / 2)   
          
        fSopra1 = CFloat((da.W / 2))  
        fSopra2 = CFloat(da.H / 2)   
        fSotto1 = CFloat(- (da.W / 2))  
        fSotto2 = CFloat(- (da.H / 2))                          
        ' Vortice:
        .Translate(fSopra1, fSopra2)      
        .Rotate(Rad(fAngolo))     
        .Translate(fSotto1, fSotto2)  
        ' ' Testo: 
        '.DrawText(sTesto, x, y, iLarg, iAlt)           
        .Text(sTesto, x, y, iLarg, iAlt)  
        .Fill              
        ' Arco:
        .Arc(xArc, yArc, fRaggio)  
        .Stroke   
        .End  
                
     End With       
     bOk = False  
  Endif
      
End
     
     
Public Sub ridimensiona(size As Float) As Float  
     
' Proporziona il testo nell'area di disegno:
  If Paint.Device = da Then  
    Return (size * 0.744)  
  Else  
    Return size  
  Endif    
     
End
     

Public Sub attivaDisegno()  
     
' Porta a vero bOk, pulisce l'area di disegno e attiva il disegno:
  bOk = True  
  da.Clear    
  da.Refresh  
      
End
     
     
Public Sub btCentro_Click()  
    
' Indica il tipo di rotazione, attiva il disegno:
  sPos = "Center"    
  attivaDisegno()  
      
End
  
     
Public Sub btTesta_Click()  
      
' Indica il tipo di rotazione, attiva il disegno:
  sPos = "Testa"    
  attivaDisegno()  
      
End
     

Public Sub btCoda_Click()  

' Indica il tipo di rotazione, attiva il disegno:
  sPos = "Coda"    
  attivaDisegno()  
     
End
     
     
Public Sub btEsterna_Click()  
     
' Indica il tipo di rotazione, attiva il disegno:
  sPos = "Esterna"    
  attivaDisegno()  
      
End
     
     
Public Sub btLeft_Click()  
     
' Ogni volta che si agisce sul tasto incrementa il valore di un ottavo di giro:
' (positivo = senso antiorario).
      
  fAngolo += 45  
  If fAngolo = 405 Then fAngolo = 45  
  bOk = True  
  da.Refresh  
      
End
  
     
Public Sub btRight_Click()  

' Ogni volta che si agisce sul tasto decrementa il valore di un ottavo di giro:
' (negativo = senso orario).
    
  fAngolo -= 45  
  If fAngolo = -405 Then fAngolo = -45  
  bOk = True  
  da.Refresh  
     
End


Note

[1] Il codice è stato realizzato dall'utente Gianluigi del forum www.gambas-it.org.

[2] Si vedano anche queste pagine della WIKI:
- Ruotare qualsiasi elemento da disegnare in una DrawingArea
- Curvare il testo in una DrawingArea