Ruotare il testo in una DrawingArea

Da Gambas-it.org - Wikipedia.

Introduzione

La rotazione di uno o più caratteri, come ogni altro elemento disegnato 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 disegnato 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
' Impone la rotazione di tutto ciò che viene disegnato a seguire:
   .Rotate(Rad(-Slider1.Value))
   .Brush = Paint.Color(Color.Yellow)
   .Font = Font["Sans Serif, 22"]
' Il testo ruoterà comunque intorno al suo centro verticale e orizzontale:
   .DrawText(testo, -Paint.TextExtents(testo).W / 2, Paint.TextExtents(testo).H / 2, -.TextExtents(testo).W / 2, -.TextExtents(testo).H / 2, Align.Center)
' oppure anche così:
' .DrawText(testo, -.Font.TextWidth(testo) / 2, -.Font.TextHeight(testo) / 2, .Font.TextWidth(testo), .Font.TextHeight(testo), Align.Center)
    .End
 End With
 
End
 
Public Sub Slider1_Change()
 
 DrawingArea1.Refresh
 
End

Per modificare la posizione (ossia le coordinate) standard dell'elemento disegnato sulla superficie del suo Oggetto grafico, si dovrà utilizzare il Metodo ".Translate()" della Classe "Paint".
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
' Impone la rotazione del testo, disegnato, sempre al centro della "DrawingARea":
   .Translate(DrawingArea1.W / 2, DrawingArea1.H / 2)
   .Rotate(Rad(-Slider1.Value))
   .Brush = Paint.Color(Color.Yellow)
   .Font = Font["Sans Serif, 22"]
' Il testo ruoterà comunque intorno al suo centro verticale e orizzontale:
   .DrawText(testo, -Paint.TextExtents(testo).W / 2, Paint.TextExtents(testo).H / 2, -.TextExtents(testo).W / 2, -.TextExtents(testo).H / 2, Align.Center)
' oppure anche così:
' .DrawText(testo, -.Font.TextWidth(testo) / 2, -.Font.TextHeight(testo) / 2, .Font.TextWidth(testo), .Font.TextHeight(testo), Align.Center)
    .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 [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à.

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


[nota 2]



Note

[1] Il codice è stato realizzato dall'utente 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