Disegnare in una DrawingArea un goniometro

Per disegnare su una DrawingArea un semplice quadrante del goniometro, si potrà adottare il seguente codice: ^{[nota 1]}

Private DrawingArea1 As DrawingArea
Private FINEANGOLO As Short = 360


Public Sub Form_Open()

 With Me
   .Move(0, 0, Screen.AvailableWidth, Screen.AvailableHeight)
   .Arrangement = Arrange.Fill
 End With
 With DrawingArea1 = New DrawingArea(Me) As "DrawingArea1"
   .Background = Color.Lighter(Color.Yellow)
 End With

End


Public Sub DrawingArea1_Draw()

' Raggio del cerchio su cui posizionare i numeri, pari al 40% dell'altezza dell'area di disegno:
 Dim rag As Short = DrawingArea1.H * 0.4

' Coordinate del centro del DrawingArea (centro del cerchio):
 Dim cx As Float = DrawingArea1.W / 2
 Dim cy As Float = DrawingArea1.H / 2
 Dim label As String        ' Variabile per contenere il testo (numero) da disegnare
 Dim an As Short            ' Variabile per l'angolo corrente in gradi
 Dim textW, textH As Float  ' Larghezza e altezza del testo da disegnare
 Dim correctionY As Float   ' Correzione verticale empirica per centrare visivamente il testo
 Dim x, y As Float          ' Coordinate di posizionamento del testo
 
 With Paint
' Imposta il colore del pennello per il testo:
   .Brush = Paint.Color(Color.Blue)

' Ciclo per disegnare i numeri da 0 a 350 gradi, con passo di 10 gradi:
   For an = 0 To FINEANGOLO - 10 Step 10
' Converte l'angolo corrente in stringa per disegnare il numero:
     label = CStr(an)

' Calcola la larghezza e l'altezza del testo (numero) usando il font corrente:
     textW = DrawingArea1.Font.TextWidth(label)
     textH = DrawingArea1.Font.TextHeight(label)

' Valore empirico per correggere l'offset verticale del testo, per farlo sembrare visivamente centrato:
     correctionY = textH * 0.35

' Calcola la coordinata X del punto sul cerchio dove posizionare il testo
' Coseno usato per partire da destra (0 gradi sull'asse X positivo)
' Sottrae metà larghezza testo per centrarlo orizzontalmente.
     x = cx + (rag + 20) * Cos(Rad(an)) - (textW / 2)

' Calcola la coordinata Y del punto sul cerchio dove posizionare il testo.
' Seno per posizione verticale lungo la circonferenza.
' Aggiunge la correzione verticale per un migliore allineamento visivo.
     y = cy + (rag + 20) * Sin(Rad(an)) + correctionY

' Disegna il testo (numero) nella posizione calcolata:
     .Text(label, x, y)

' Riempie il testo con il colore impostato (necessario per renderlo visibile):
     .Fill
   Next

' Cambia colore pennello per disegnare il cerchio rosso:
   .Brush = Paint.Color(Color.Red)

' Imposta lo spessore della linea del cerchio:
   .LineWidth = 3.0

' Disegna un arco completo (cerchio) con centro (cx, cy) e raggio 'rag'.
' Angoli da 0 a 360 gradi (in radianti), non chiuso (False).
   .Arc(cx, cy, rag, Rad(0), Rad(360), False)

' Esegue il disegno della linea del cerchio:
   .Stroke
 End With

End

Un altro codice possibile:

Private DrawingArea1 As DrawingArea


Public Sub Form_Open()

 With Me
   .Move(0, 0, Screen.AvailableWidth, Screen.AvailableHeight)
   .Arrangement = Arrange.Fill
 End With

 With DrawingArea1 = New DrawingArea(Me) As "DrawingArea1"
   .Background = Color.Lighter(Color.White)
 End With

End


Public Sub DrawingArea1_Draw()

' Centro orizzontale e verticale della DrawingArea:
 Dim cx, cy As Integer
' Raggio del goniometro con margine per non uscire dai bordi:
 Dim r As Integer
' Variabile per angolo in gradi:
 Dim a As Integer
' Coordinate per le tacche:
 Dim x1, y1, x2, y2 As Float
' Angolo in radianti, calcolato da gradi:
 Dim angleRad As Float

 cx = DrawingArea1.Width / 2              ' Centro X
 cy = DrawingArea1.Height / 2             ' Centro Y
 r = Min(cx, cy) - 40                     ' Raggio con margine

 Paint.Arc(cx - r, cy - r, r * 2, r * 2, 0, 360)  ' Disegna cerchio completo

 For a = 0 To 360 Step 10                 ' Ciclo da 0 a 360 gradi, step 10°

   angleRad = Rad(a)                      ' Conversione gradi -> radianti

' Coordinate esterne della tacca (sulla circonferenza):
   x1 = cx + Cos(angleRad) * r
   y1 = cy + Sin(angleRad) * r

' Coordinate interne della tacca (più corta o più lunga):
   If a Mod 30 = 0 Then
     x2 = cx + Cos(angleRad) * (r - 20)   ' Tacca lunga ogni 30°
     y2 = cy + Sin(angleRad) * (r - 20)
   Else
     x2 = cx + Cos(angleRad) * (r - 10)   ' Tacca corta ogni 10°
     y2 = cy + Sin(angleRad) * (r - 10)
   EndIf

   Paint.MoveTo(x1, y1)                   ' Inizio linea tacca
   Paint.LineTo(x2, y2)                   ' Fine linea tacca

' Disegna numeri ogni 30°, escluso il 360 per non sovrapporre lo 0:
   If a Mod 30 = 0 And a <> 360 Then
     Dim tx, ty As Float
' Posizione testo leggermente più interno rispetto alla tacca lunga:
     tx = cx + Cos(angleRad) * (r - 35)
     ty = cy + Sin(angleRad) * (r - 35)

     Paint.Font.Size = 10
     Paint.Text(Str(a), tx - 10, ty - 6, 20, 12, Align.Center)  ' Disegna numero angolo
   End If

 Next

' Linea orizzontale centrale (diametro):
 Paint.MoveTo(cx - r, cy)
 Paint.LineTo(cx + r, cy)

' Linea verticale centrale (diametro):
 Paint.MoveTo(cx, cy - r)
 Paint.LineTo(cx, cy + r)

' Applica il disegno
 Paint.Stroke()

End

Note

[1] Vedere anche: Disegnare in una DrawingArea un cerchio