Как нарисовать круговую диаграмму progressbar с помощью GraphicsPath в WinForm?

Question

Я хочу свой собственный круговой индикатор выполнения в WinForm. Но результат не подходит для того, что я думаю. Как я могу нарисовать фигуру, как на картинке? Я загрузил два изображения, чтобы быть ясным в моей проблеме.

Мой код, чтобы сделать это:

void Form1_Paint(object sender, PaintEventArgs e) 
    { 
     int angle = 120; 

     e.Graphics.SmoothingMode = SmoothingMode.HighQuality; 

     Rectangle outerRect = new Rectangle(50, 50, 100, 100); 
     Rectangle innerRect = new Rectangle(70, 70, 60, 60); 

     int innerRadius = innerRect.Width/2; 
     int outerRadius = outerRect.Width/2; 

     Point innerCenter = new Point(innerRect.X + innerRadius, innerRect.Y + innerRadius); 
     Point outerCenter = new Point(outerRect.X + outerRadius, outerRect.Y + outerRadius); 

     GraphicsPath outerCircle = new GraphicsPath(); 
     outerCircle.AddEllipse(outerRect); 

     GraphicsPath innerCircle = new GraphicsPath(); 
     innerCircle.AddEllipse(innerRect); 

     GraphicsPath progPath = new GraphicsPath(); 

     Point p1 = new Point(outerRect.X + outerRadius, outerRect.Y); 
     Point p2 = new Point(innerRect.X + innerRadius, innerRect.Y); 


     Point inner = new Point((int)(innerRadius * Math.Cos(angle * Math.PI/180) + innerCenter.X), 
           (int)(innerRadius * Math.Sin(angle * Math.PI/180) + innerCenter.Y)); 
     Point outer = new Point((int)(outerRadius * Math.Cos(angle * Math.PI/180) + outerCenter.X), 
           (int)(outerRadius * Math.Sin(angle * Math.PI/180) + outerCenter.Y)); 

     progPath.AddLine(p1, p2); 
     progPath.AddArc(innerRect, -90, angle); 
     progPath.AddLine(inner, outer); 
     progPath.AddArc(outerRect, angle - 90,-angle); 

     progPath.Widen(Pens.Black); 
     e.Graphics.DrawPath(Pens.Black, progPath); 

    } 

Answer 1

Вы можете создать GraphicsPath, затем добавьте 2 дуги на путь, используя AddArc метод:

• Внешняя дуга от начального угла 270 и угол развертки 120 степень.
• Внутренняя дуга в обратном направлении, от начального угла 270 + 120 и угла стреловидности -120 степени
• Затем закройте путь, используя GraphicsPath.CloseFigure.

Таким образом, у вас будет толстая дуга в качестве пути.

Вы можете заполнить путь, используя метод Graphics.FillPath. А также вы можете рисовать границы с помощью метода GraphicsPath.drawPath.

Результат

Код

private void Form1_Paint(object sender, PaintEventArgs e) 
{ 
    var g = e.Graphics; 
    g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias; 

    var center = new Point(100, 100); 
    var innerR = 30; 
    var thickness = 20; 
    var startAngle = 270; 
    var arcLength = 120; 
    var outerR = innerR + thickness; 
    var outerRect = new Rectangle 
        (center.X - outerR, center.Y - outerR, 2 * outerR, 2 * outerR); 
    var innerRect = new Rectangle 
        (center.X - innerR, center.Y - innerR, 2 * innerR, 2 * innerR); 

    using (var p = new GraphicsPath()) 
    { 
     p.AddArc(outerRect, startAngle, arcLength); 
     p.AddArc(innerRect, startAngle + arcLength, -arcLength); 
     p.CloseFigure(); 
     e.Graphics.FillPath(Brushes.Green, p); 
     e.Graphics.DrawPath(Pens.Black, p); 
    } 
}