Disegnare un misuratore analogico su una DrawingArea

Mostriamo qualche codice per disegnare su una DrawingArea un possibile misuratore analogico virtuale da poter usare.

1° esempio

Public value As Integer = 50  ' valore iniziale del misuratore


Public Sub Form_Open()
 
 Me.Move(0, 0, Screen.AvailableWidth, Screen.AvailableHeight)
 Me.Arrangement = Arrange.Fill

 DrawingArea1.Refresh

End


Public Sub DrawingArea1_Draw()

 Dim w As Integer = DrawingArea1.Width
 Dim h As Integer = DrawingArea1.Height

 Dim r As Integer = Min(w, h) \ 2 - 50
 Dim cx As Integer = w \ 2
 Dim cy As Integer = h \ 2

 Paint.AntiAlias = True

' Salva stato grafico:
 Paint.Save()

' Ribalta verticalmente il disegno:
 Paint.Translate(cx, cy)
 Paint.Scale(1, -1)
 Paint.Translate(-cx, -cy)

' Sfondo circolare:
 Paint.Brush = Paint.Color(Color.RGB(245, 245, 245))
 Paint.Ellipse(cx - r, cy - r, r * 2, r * 2)
 Paint.Fill

' Tacche e numeri da 0 a 100:
 Dim i As Integer
 For i = 0 To 100 Step 10

   Dim angle As Float = Rad(180 - i * 180 / 100)
   Dim x1 As Float = cx + Cos(angle) * r
   Dim y1 As Float = cy + Sin(angle) * r
   Dim x2 As Float = cx + Cos(angle) * (r - 15)
   Dim y2 As Float = cy + Sin(angle) * (r - 15)

   Paint.LineWidth = 2
   Paint.Brush = Paint.Color(Color.RGB(80, 80, 80))
   Paint.MoveTo(x1, y1)
   Paint.LineTo(x2, y2)
   Paint.Stroke

   If i Mod 20 = 0 Then
     Dim tx As Float = cx + Cos(angle) * (r - 35)
     Dim ty As Float = cy + Sin(angle) * (r - 35)

     Paint.Font.Name = "Sans"
     Paint.Font.Size = 20
     Paint.Font.Bold = False
     Paint.Brush = Paint.Color(Color.Black)

     Paint.Save()
     Paint.Translate(tx, ty)
     Paint.Scale(1, -1)      ' Inverte solo il testo per mostrarlo diritto
     Paint.Text(Str(i), -10, -10, 20, 20, Align.Center)
     Paint.Fill
     Paint.Restore()
   Endif

 Next

' Disegno della Lancetta:
 Dim valAngle As Float = Rad(180 - value * 180 / 100)
 Dim lx As Float = cx + Cos(valAngle) * (r - 60)
 Dim ly As Float = cy + Sin(valAngle) * (r - 60)

 Paint.LineWidth = 3
 Paint.Brush = Paint.Color(Color.Red)
 Paint.MoveTo(cx, cy)
 Paint.LineTo(lx, ly)
 Paint.Stroke

' Centro della lancetta:
 Paint.Brush = Paint.Color(Color.Black)
 Paint.Ellipse(cx - 4, cy - 4, 8, 8)
 Paint.Fill

 Paint.Restore()
 
End


Public Sub Form_MouseWheel()

 If Mouse.Delta > 0 Then
   value = Min(value + 1, 100)
 Else If Mouse.Delta < 0 Then
   value = Max(value - 1, 0)
 Endif

 DrawingArea1.Refresh()

End

2° esempio

Private Const VALORI As Short = 100     ' L'ambito dei valori (da 0 sino al massimo qui espresso)
Private ARCO As Short = VALORI * 2      ' L'arco entro il quale si stenderanno graficamente i valori (da 0 sino a VALORI)
Private Const INIZIALE As Short = 170   ' Il punto (in gradi) di inizio dell'arco dei valori mostrati
Private Const PASSO As Byte = 20        ' Il passo dei valori effettivamente mostrati lungo l'arco
Private Const RAGGIO As Short = 100
Private Const AUM_RAGG As Single = 2.3
Private INARC075 As Single = INIZIALE + (ARCO * 0.75)
Private ii As Integer[] = [Color.Green, INIZIALE, ARCO * 0.75, 
                           Color.Yellow, INARC075, ARCO * 0.15,
                           Color.Red, INARC075 + (ARCO * 0.15), ARCO * 0.1]
Private n As Single
Private DrawingArea1 As DrawingArea


Public Sub Form_Open()
 
 With Me
   .W = Screen.AvailableWidth
   .H = Screen.AvailableHeight
   .Arrangement = Arrange.Fill
 End With
 With DrawingArea1 = New DrawingArea(Me) As "DrawingArea1"
   .Background = Color.SoftYellow
 End With
 
End


Public Sub DrawingArea1_MouseMove()
 
 n = (((DrawingArea1.H / 2) - (Mouse.Y - 45)) / (DrawingArea1.H / 3)) * ARCO
 
 n = Clamp(n, 0, ARCO)
 
 DrawingArea1.Refresh
 
End 


Public Sub DrawingArea1_Draw()

 Dim x, y, t As Short
 Dim c, r2 As Float
 Dim b As Byte
 
 x = DrawingArea1.W * 0.5
 y = DrawingArea1.H * 0.5
' Quando "n" è 0 deve posizionarsi sul valore in gradi rappresentato dalla Costante "INIZIALE", tenendo conto che qui 0° è posto tra il I e il IV Quadrante del piano cartesiano:
 c = (n + INIZIALE)
 
 With Paint
   .Brush = .Color(Color.DarkBlue)
' Disegna il cerchietto interno:
   .LineWidth = 4.0
   .Ellipse(x - 4, y - 4, 8, 8, 0, 360, False)
   .Stroke
' Disegna il cerchio esterno:
   .LineWidth = 12.0
   .Ellipse(x - ((RAGGIO * AUM_RAGG) / 2), y - ((RAGGIO * AUM_RAGG) / 2), RAGGIO * AUM_RAGG, RAGGIO * AUM_RAGG, 0, 360, False)
   .Stroke
' Disegna i valori:
   .Brush = .Color(Color.DarkBlue)
   .Font.Size = 8.0
   r2 = RAGGIO * 0.8
   For t = INIZIALE To (INIZIALE + ARCO) Step PASSO
     .DrawText(CStr(Fix(t - INIZIALE) \ (ARCO \ VALORI)), (x - 2) + (r2 * Cos(Rad(t))), (y - 1) + (r2 * Sin(Rad(t))), 5, 5, Align.Center)
   Next
   .Stroke
' Disegna l'arco con i 3 colori:
   .LineWidth = 12.0
   r2 = RAGGIO * 0.95
   For b = 0 To 6 Step 3
     .Brush = .Color(ii[b])
     .Arc(x, y, r2, Rad(ii[b + 1]), Rad(ii[b + 2]), False)
     .Stroke
   Next 
' Disegna la lancetta:
   .Brush = .Color(Color.Red)
   .LineWidth = 1.0
   .MoveTo(x, y)
   .LineTo(x + (RAGGIO * Cos(Rad(c))), y + (RAGGIO * Sin(Rad(c))))
   .Stroke
' Disegna i numeri:
   .DrawText(CStr(Fix(n / (ARCO / VALORI))), x - 3, y + 20, 10, 10, Align.Center)
   
 End With
 
End

Per far ruotare la lancetta indicatrice, cliccare all'altezza dello zero del quadrante e, mantenendo premuto il tasto sinistro del mouse, spostarsi in verticale.

3° esempio

Quest'altro esempio, molto essenziale, modificato su un codice iniziale creato dal membro cogier del forum https://forum.gambas.one/index.php.

Private DrawingArea1 As DrawingArea
Private Slider1 As Slider


Public Sub Form_Open()

 With Me
   .Height = 300
   .Width = 300
   .Padding = 5
   .Arrangement = Arrange.Vertical
   .Center
 End With

 With DrawingArea1 = New DrawingArea(Me) As "DrawingArea1"
    .Expand = True
 End With

 With Slider1 = New Slider(Me) As "Slider1"
   .Height = 20
   .MaxValue = 360
 End With

End


Public Sub Slider1_Change()

 DrawingArea1.Refresh

End 


Public Sub DrawingArea1_Draw()

 Dim cx As Integer = DrawingArea1.W / 2  ' Centro orizzontale
 Dim cy As Integer = DrawingArea1.H / 2  ' Centro verticale

 With Paint
   .Translate(cx, cy)
   .Rotate(-Slider1.value / ((360 * 100) / 630))
   .Translate(-cx, -cy)
   .Brush = Paint.Color(Color.Red)
   .MoveTo(CX, CY - 80)
   .LineTo(cx + 10, cy)
   .LineTo(cx, cy + 20)
   .LineTo(cx - 10, cy)
   .LineTo(cx, cy - 80)
   .Fill

   .Brush = Paint.Color(Color.Black)
   .MoveTo(CX, CY - 80)
   .LineTo(cx + 10, cy)
   .LineTo(cx, cy + 20)
   .LineTo(cx - 10, cy)
   .LineTo(cx, cy - 80)
   .lineto(cx, cy + 20)
   .Stroke
   .End
 End With

End