Progressbar Circulaire avec GraphicsPath

Version imprimable

1 pièce(s) jointe(s)

Bonjour, je me suis crée un progressbar circulaire mais mon problème c'est quand il y a deux Ellipse avec GraphicsPath, j'arrive pas a changer de couleur avec les deux ellipses(voir image). comment puis-je faire cela ?

voici en image avec une valeur à 50 % :
Pièce jointe 612412

voici mon code :

Code:

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
Imports System.Drawing.Drawing2D
 
Public Class CirculaireProgressbar : Inherits ProgressBar
 
    Public Sub New()
        Me.SetStyle(ControlStyles.OptimizedDoubleBuffer Or ControlStyles.UserPaint, True)
        Me.Size = New Size(180, 160)
    End Sub
 
    Protected Overrides Sub OnPaint(e As System.Windows.Forms.PaintEventArgs)
        MyBase.OnPaint(e)
        Dim rect As New Rectangle(0, 0, Me.Width, Me.Height)
        Dim g As Graphics = e.Graphics
        g.SmoothingMode = Drawing2D.SmoothingMode.AntiAlias
        Using p As New GraphicsPath
            g.ResetClip()
            p.AddEllipse(New Rectangle(rect.X + 1, rect.Y + 1, rect.Width - 3, rect.Height - 3))
            g.FillPath(New SolidBrush(Color.DodgerBlue), p)
            p.AddEllipse(New Rectangle(CInt(rect.Width / 4), CInt(rect.Height / 4), CInt(rect.Width / 2), CInt(rect.Height / 2)))
            g.DrawPath(New Pen(New SolidBrush(Color.Black), 3), p)
            g.FillPath(Brushes.Blue, p)
            g.SetClip(p, CombineMode.Intersect)
            Dim HeightH As Integer = CInt((rect.Height / (Maximum - Minimum)) * Value)
            g.FillRectangle(New SolidBrush(Color.FromArgb(224, 224, 224)), New Rectangle(rect.X, rect.Height - HeightH, rect.Width, HeightH))
        End Using
        If g Is Nothing Then g.Dispose()
    End Sub
End Class

Pouvez-vous m'aider à résoudre mon problème pour changer de couleur avec les deux ellipses comme image? Merci d'avance

1 pièce(s) jointe(s)

Bonsoir, voici en image ce que je voulais faire :
Pièce jointe 612572

pour recupere l'image du Circulaire :

Code:

1
2
3
4
5
6
7
8
9
10
Dim r As New Region(p)
            Dim rectF As RectangleF = r.GetBounds(g)
            Using bmp As New Bitmap(rect.Width, rect.Height)
                Using b As Graphics = Graphics.FromImage(bmp)
                    b.FillEllipse(New SolidBrush(Color.Blue), New Rectangle(rect.X + 1, rect.Y + 1, rect.Width - 3, rect.Height - 3))
                    b.FillEllipse(New SolidBrush(Color.DodgerBlue), holeRect)
                    b.Clip = r
                    bmp.Save(My.Computer.FileSystem.SpecialDirectories.Desktop & "\Circulaire.png", ImageFormat.Png)
                End Using
            End Using

comment puis faire progressbar circulaire en mode vertical sens utiliser drawImage? avez-vous une idée utiliser les couleurs comme un progressbar Vertical ( comme l'image). merci d'avance

bonjour
A ma connaissance pour dessiner un progressbar circulaire il faut "jongler" un tout petit avec le GraphicsPath mais à condition de le manier "droitement et habilement".
voici un exemple de code VB qui dessine un progressbar tout a fait circulaire avec un GraphicsPath moyennant 2 rectangles "inflatés" (dégonfles on dirait en Français mais les anglais déforment le Français).
En bonus il peut être enjolive avec le Pen.Compound (array de single) qui permet de "manipuler" l'épaisseur du Pen (on a plusieurs "pen" de différentes épaisseurs dans le même et pour cela il suffit de lui donner une épaisseur suffisante)

Code:

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
 
Imports System.Drawing.Drawing2D
 
Public Class Form3
    Private TotalAngle As Single = 180.0F ' angle total à balayer
    Private StartAngle As Single = 180.0F ' angle depart (compté dans le sens anti-horaire)
    Private EndAngle As Single = 0.0F ' angle de fin dit "sweep angle" ou de balayage
    'la tache
    Private Tache As Single = 500.0 'dure de la tache
    Private Pas As Single = 5.0 'son pas 
    Private TotalProgress As Single 'progression courante
    Private pourcent As Single ' pourcentage de la tache
    Public Sub New()
 
        ' Cet appel est requis par le concepteur.
        InitializeComponent()
 
        ' Ajoutez une initialisation quelconque après l'appel InitializeComponent().
 
 
        Timer1.Interval = 100
    End Sub
    Private Sub BtnStart_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnStart.Click
        TotalProgress = 0
        pourcent = TotalProgress / Tache
        EndAngle = TotalAngle * pourcent
        Timer1.Start()
    End Sub
    Private Sub btnStop_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnStop.Click
        Timer1.Stop()
    End Sub
    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        TotalProgress += Pas
        pourcent = TotalProgress / Tache
        EndAngle = TotalAngle * pourcent
        If EndAngle > TotalAngle Then
            EndAngle = 0.0
            TotalProgress = 0.0
        End If
        Me.Invalidate()
    End Sub
    Private Sub Form3_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
        Dim gr As Graphics = e.Graphics
        PaintProgessBar(gr)
    End Sub
    Private Sub PaintProgessBar(ByVal gr As Graphics)
        Dim rect1 As New Rectangle(200, 200, 500, 500) 'carre width = height
        Dim rect2 As Rectangle = rect1
        rect2.Inflate(-50, -50) 'un "vase" assez large 
        Using MyPath As New GraphicsPath
            'dessin de la jauge circulaire
            MyPath.AddArc(rect1, StartAngle, EndAngle)
            MyPath.Reverse()
            MyPath.AddArc(rect2, StartAngle, EndAngle)
            MyPath.CloseFigure()
            gr.FillPath(Brushes.Blue, MyPath)
 
            'le simple pen " ou stylet 
            Using simplePen As New Pen(Brushes.Red, 4.0)
                gr.DrawPath(simplePen, MyPath)
            End Using
            'ici le "compound pen " ou stylet composé si tu veut le tester
            'Using compoundPen As New Pen(Brushes.Red, 10.0)
            '    compoundPen.CompoundArray = {0.0F, 0.2F, 0.4F, 0.5F, 0.7F, 1.0F}
            '    gr.DrawPath(compoundPen, MyPath)
            'End Using
 
            'impression du pourcentage courant
            If MyPath.PointCount <> 0 Then
                Dim pt As PointF = MyPath.PathPoints(0)
                pt = PointF.Subtract(pt, New SizeF(20.0F, 20.0F))
                Using fnt As New Font("arial", 16.0F, FontStyle.Bold)
                    Dim pct As Single = pourcent * 100.0
                    gr.DrawString(pct.ToString, fnt, Brushes.Black, pt)
                End Using
            End If
 
        End Using
    End Sub
 
 
End Class

bon code...

30/01/2022, 15h29
MABROUKI

rebonjour
nb: pour remplir en totalité (360 degres) le "vase de Soisson" (chez moi le sablier s'appelle vase en arabe) ,il suffit d'assigner à la variable "totalangle" la valeur 360.0

bon code...

rebonjour
voici une autre version de la Jauge Circulaire qui je l'espere fera ton bonheur ( CIRCULAR GAUGE ,remarques comment "jauge" est devenu "gauge" chez nos faux amis anglais).
Bref l'exemple de code vb est inspire du code déjà posté .
Mais cette fois il dessine 2 "demi-ellipses" (colorées à dessein différemment pour illustrer le code,mais qui peuvent être colorées de la même couleur pour donner l'illusion à l''user d'une seul "vase de Soisson")

Code:

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
 
Imports System.Drawing.Drawing2D
 
Public Class FormGaugeBis
    Private TotalAngle1 As Single = 180.0F ' angle total à balayer
    Private TotalAngle2 As Single = -180.0F ' angle total à balayer
    Private StartAngle1 As Single = 90.0F ' angle depart (compté dans le sens anti-horaire)
    Private EndAngle1 As Single = 0.0F ' angle de fin dit "sweep angle" ou de balayage
    Private StartAngle2 As Single = 90.0F ' angle depart (compté dans le sens anti-horaire)
    Private EndAngle2 As Single = 0.0 ' angle de fin dit "sweep angle" ou de balayage
    'la tache
    Private Tache As Single = 500.0 'dure de la tache
    Private Pas As Single = 5.0 'son pas 
    Private TotalProgress As Single 'progression courante
    Private pourcent As Single ' pourcentage de la tache
 
    Public Sub New()
        ' Cet appel est requis par le concepteur.
        InitializeComponent()
 
        ' Ajoutez une initialisation quelconque après l'appel InitializeComponent().
        Timer1.Interval = 100
        TotalProgress = 0
    End Sub
    Private Sub btnStart_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnStart.Click
 
        pourcent = TotalProgress / Tache
        EndAngle1 = TotalAngle1 * pourcent
        EndAngle2 = TotalAngle2 * pourcent
        Timer1.Start()
    End Sub
    Private Sub btnStop_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnStop.Click
        Timer1.Stop()
    End Sub
    Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        TotalProgress += Pas
        pourcent = TotalProgress / Tache
        EndAngle1 = TotalAngle1 * pourcent
        EndAngle2 = TotalAngle2 * pourcent
        If TotalProgress > Tache Then
            TotalProgress = 0.0
            Timer1.Stop()
        End If
        Me.Invalidate()
    End Sub
    Private Sub FormGaugeBis_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
        Dim gr As Graphics = e.Graphics
        PaintProgessBar(gr)
    End Sub
    Private Sub PaintProgessBar(ByVal gr As Graphics)
        Dim rect1 As New Rectangle(200, 200, 500, 500) 'carre width = height
        Dim rect2 As Rectangle = rect1
        rect2.Inflate(-50, -50) 'un "vase" assez large 
        Using MyPath As New GraphicsPath
            'dessin de la jauge circulaire
            MyPath.AddArc(rect1, StartAngle1, EndAngle1)
            MyPath.Reverse()
            MyPath.AddArc(rect2, StartAngle1, EndAngle1)
            MyPath.CloseFigure()
            gr.FillPath(Brushes.Blue, MyPath)
            'le simple pen " ou stylet 
            Using simplePen As New Pen(Brushes.Red, 4.0)
                gr.DrawPath(simplePen, MyPath)
            End Using
 
            MyPath.Reset()
            MyPath.AddArc(rect1, StartAngle2, EndAngle2)
            MyPath.Reverse()
            MyPath.AddArc(rect2, StartAngle2, EndAngle2)
 
            MyPath.CloseFigure()
            gr.FillPath(Brushes.Magenta, MyPath)
 
            'le simple pen " ou stylet 
            Using simplePen As New Pen(Brushes.Red, 4.0)
                gr.DrawPath(simplePen, MyPath)
            End Using
            'ici le "compound pen " ou stylet composé si tu veut le tester
            'Using compoundPen As New Pen(Brushes.Red, 10.0)
            '    compoundPen.CompoundArray = {0.0F, 0.2F, 0.4F, 0.5F, 0.7F, 1.0F}
            '    gr.DrawPath(compoundPen, MyPath)
            'End Using
 
            'impression du pourcentage courant
            If MyPath.PointCount <> 0 Then
                Dim pt As PointF = MyPath.PathPoints(0)
                pt = PointF.Subtract(pt, New SizeF(20.0F, 20.0F))
                Using fnt As New Font("arial", 16.0F, FontStyle.Bold)
                    Dim pct As Single = pourcent * 100.0
                    gr.DrawString(pct.ToString, fnt, Brushes.Black, pt)
                End Using
            End If
 
        End Using
    End Sub
 
 
 
End Class

bon code...

1 pièce(s) jointe(s)

Merci d'avoir répondu MABROUKI.

Voici ce que je voulais faire un circulaire progressbar Verticale.
Pièce jointe 612859

Voici mon code une mise a jour :

Code:

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
Imports System.Drawing.Drawing2D
Imports System.Drawing.Imaging
 
Public Class Circulaire : Inherits ProgressBar
 
 
    Private _MyFont As Font = New Font("Times New Roman", 18, FontStyle.Bold)
    Public Property MyFont As Font
        Get
            Return _MyFont
        End Get
        Set(value As Font)
            _MyFont = value
            Me.Invalidate()
        End Set
    End Property
 
    Private _Color1 As Color = Color.DodgerBlue
    Public Property Color1 As Color
        Get
            Return _Color1
        End Get
        Set(value As Color)
            If value = Color.Transparent OrElse value = _Color1 Then
                Return
            Else
                _Color1 = value
                Me.Invalidate()
            End If
        End Set
    End Property
 
    Private _Color2 As Color = Color.Blue
    Public Property Color2 As Color
        Get
            Return _Color2
        End Get
        Set(value As Color)
            If value = Color.Transparent OrElse value = _Color2 Then
                Return
            Else
                _Color2 = value
                Me.Invalidate()
            End If
        End Set
    End Property
 
    Private _Color3 As Color = Color.Black
    Public Property Color3 As Color
        Get
            Return _Color3
        End Get
        Set(value As Color)
            If value = Color.Transparent Then
                Return
            Else
                _Color3 = value
                Me.Invalidate()
            End If
        End Set
    End Property
    Public Sub New()
        Me.SetStyle(ControlStyles.OptimizedDoubleBuffer Or ControlStyles.UserPaint, True)
        Me.Size = New Size(180, 160)
        Me.ForeColor = Color.Black
    End Sub
 
    Protected Overrides Sub OnPaint(e As System.Windows.Forms.PaintEventArgs)
        MyBase.OnPaint(e)
        Dim rect As New Rectangle(0, 0, Me.Width, Me.Height)
        Using bmp As New Bitmap(rect.Width, rect.Height)
            Using b As Graphics = Graphics.FromImage(bmp)
                Dim path As GraphicsPath = CirclulairePath(b, rect, _Color1, _Color2)
                e.Graphics.SmoothingMode = SmoothingMode.AntiAlias
                Dim HeightH As Integer = CInt((rect.Height / (Maximum - Minimum)) * Value)
                e.Graphics.DrawImage(bmp, New Rectangle(rect.X, rect.Height - HeightH, rect.Width, HeightH), New Rectangle(rect.X, rect.Height - HeightH, Math.Min(bmp.Width, rect.Width), Math.Min(bmp.Height, HeightH)), GraphicsUnit.Pixel)
                e.Graphics.DrawPath(New Pen(New SolidBrush(_Color3), 2), path)
                e.Graphics.DrawString(Value & " %", MyFont, New SolidBrush(Me.ForeColor), rect, New StringFormat With {.Alignment = StringAlignment.Center, .LineAlignment = StringAlignment.Center})
            End Using
        End Using
    End Sub
 
    Private Function CirclulairePath(b As Graphics, rect As Rectangle, Color1 As Color, Color2 As Color) As GraphicsPath
        Dim p As New GraphicsPath
        p.AddEllipse(New Rectangle(rect.X + 1, rect.Y + 1, rect.Width - 3, rect.Height - 3))
        p.CloseFigure()
        b.FillPath(New SolidBrush(Color1), p)
        p.AddEllipse(New Rectangle(CInt(rect.Width / 4), CInt(rect.Height / 4), CInt(rect.Width / 2), CInt(rect.Height / 2)))
        p.CloseFigure()
        b.FillPath(New SolidBrush(Color2), p)
        Return p
    End Function
 
End Class

Pour celui qui à besoir. cordialement,

04/02/2022, 12h54
Miska59

1 pièce(s) jointe(s)

voici en image un progressbar Google chrome que j'ai realiser.
Pièce jointe 613065

pour info, je vais maitre sur mon blog le code progressbar Google chrome.