1. 项目概述从需求到实现的圆环绘制之旅在C#的图形编程世界里绘制一个圆环听起来是个再基础不过的任务但真要把它做得漂亮、高效且易于复用里面门道可不少。无论是开发上位机软件的仪表盘、游戏UI的血条边框还是数据可视化中的环形图圆环都是一个高频出现的视觉元素。我见过不少新手朋友一上来就想着调用某个神秘的内置“DrawRing”方法结果翻遍文档发现.NET Framework或.NET Core的GDI、WPF乃至最新的MAUI里都没有这么一个现成的“圆环”绘制函数。这恰恰是问题的起点也是我们深入理解自定义图形绘制的绝佳机会。这个项目的核心就是抛开对“一键生成”的幻想从几何原理出发在C#中亲手构建一个灵活、健壮的圆环绘制方案。它不仅仅是画两个圆然后填充中间区域那么简单我们需要考虑抗锯齿、考虑性能、考虑不同图形API如GDI的Graphics、WPF的DrawingContext或Shape、SkiaSharp等的差异更要考虑如何封装成一个优雅的组件方便在不同项目中调用。接下来我将带你从零开始拆解思路、探索实现、并分享那些只有踩过坑才知道的实操细节。2. 核心思路与方案选型为何没有“银弹”当我们接到“绘制圆环”的需求时第一反应是寻找标准库支持。遗憾的是无论是System.Drawing中的Graphics类还是WPF的Shape派生类都没有直接的Ring或Donut。这迫使我们必须采用组合或路径绘制的方式。这里主要有几种主流思路每种都有其适用的场景和优劣。2.1 方案一同心圆填充法最直观这是最容易想到的方法先画一个大的实心圆再在中心画一个小的实心圆并将小圆的颜色设置为背景色或透明色从而“挖空”中心形成环状。实现伪代码思路// 假设使用GDI graphics.FillEllipse(brushOuter, outerRect); // 绘制大圆 graphics.FillEllipse(brushBackground, innerRect); // 绘制同背景色的小圆“覆盖”优点概念简单易于理解和实现。致命缺点背景依赖小圆必须与背景色一致一旦背景不是纯色或存在复杂内容此方法立即失效。过度绘制实际上绘制了两个实心图形存在不必要的性能开销。不适用于透明背景无法实现中间镂空的透明圆环。因此除非是在静态、纯色背景上做一次性绘制否则这个方案基本不可行。它更像一个思维实验帮助我们理解问题而非解决方案。2.2 方案二扇形/圆弧拼接法GDIGraphicsPath这是GDI中更专业的做法。我们利用GraphicsPath定义一个复杂的形状然后填充这个路径。绘制圆环的本质是定义一个由内外两条圆弧围成的封闭区域。核心原理圆环可以看作是一个“粗”的圆弧。我们可以从外圆的某个点开始沿着外圆弧画一段再连接到内圆弧的对应点然后沿着内圆弧画回来最后闭合路径。更简单的方法是GraphicsPath提供了AddArc方法我们可以通过组合两个同心但半径不同的圆弧来构造路径但直接添加两个圆弧不会自动连接。更通用的方法是使用GraphicsPath.AddPie并结合区域(Region)的布尔运算但更直接的是采用下面的多边形逼近法。2.3 方案三多边形逼近法通用且强大这是我最推荐也是最具普适性和灵活性的方法。其核心思想是任何平滑曲线在计算机图形学中都可以用足够多的短直线段多边形来逼近。对于一个圆环我们可以分别计算内外圆环上的一系列点然后将这些点按顺序连接形成一个闭合的多边形路径最后填充这个多边形。为什么这是最佳实践平台无关该算法基于数学计算不依赖特定图形API的高级特性可轻松移植到GDI、WPF、SkiaSharp、OpenGL甚至在控制台进行字符绘图。功能强大不仅可以画完整圆环还可以轻松绘制任意角度的圆弧环比如一个270度的进度环。效果精确通过控制分段数可以平衡性能与视觉平滑度。支持复杂样式填充、描边、渐变填充、纹理填充都能轻松应用在这个多边形路径上。基于以上分析我们将以多边形逼近法作为本次实现的核心方案并分别探讨在WinFormsGDI和WPF中的实现细节。同时我们会将其封装成可重用的类。3. 核心算法解析数学与代码的共舞要实现多边形逼近我们需要解决几个关键问题如何计算圆上的点需要多少个点如何组织这些点形成路径3.1 点的计算三角函数与参数方程圆的标准参数方程为x centerX radius * cos(angle)y centerY radius * sin(angle)其中angle是弧度制。我们需要生成从起始角例如0到结束角例如2π之间一系列等间隔角度对应的点。对于内圆和外圆我们使用相同的角度序列但半径不同。计算要点弧度与角度C#的Math.Cos和Math.Sin接受弧度参数。我们通常用角度思考如360度需要转换弧度 角度 * Math.PI / 180。分段数Resolution这决定了圆环的视觉平滑度。分段太少圆环会显得有棱角分段太多计算量增大。通常对于屏幕绘制分段数在36每10度一段到360每1度一段之间足矣。我个人的经验是对于半径在100像素以内的圆环72分段每5度一段在绝大多数情况下已经非常平滑性能也最佳。点序要形成一个可填充的闭合多边形点的顺序至关重要。我们必须按顺时针或逆时针方向依次添加点。通常我们先顺序添加外圆的所有点再逆序添加内圆的所有点这样能确保路径正确闭合且填充规则正确。3.2 路径构建与填充规则当我们把内外圆的点按顺序加入GraphicsPathGDI或PathFigureWPF后就形成了一个类似“跑道”的形状。图形系统在填充这种复杂路径时会使用“非零环绕规则”或“奇偶规则”来确定某点是否在填充区域内。我们按一致的时针方向添加点可以确保填充区域就是我们想要的圆环部分。注意在WPF中Path的FillRule属性默认是EvenOdd奇偶对于同心圆环这种“洞”的形状奇偶规则能正确填充。但为了更广泛的兼容性我们在构建点集合时就应确保其顺序能产生预期的填充效果。3.3 代码骨架RingDrawer 核心类我们先勾勒一个与图形API无关的核心计算类它只负责计算点位。public class RingGeometry { public PointF[] CalculateRingPoints(PointF center, float outerRadius, float innerRadius, float startAngleDegrees, float sweepAngleDegrees, int segments) { // 参数校验 if (innerRadius outerRadius) throw new ArgumentException(内径必须小于外径。); if (innerRadius 0 || outerRadius 0) throw new ArgumentException(半径必须为正数。); segments Math.Max(segments, 4); // 至少4段以保证是个多边形 ListPointF points new ListPointF(); float angleStep sweepAngleDegrees / segments; // 计算外圆弧上的点顺时针 for (int i 0; i segments; i) { float angle startAngleDegrees i * angleStep; float rad angle * (float)Math.PI / 180f; points.Add(new PointF( center.X outerRadius * (float)Math.Cos(rad), center.Y outerRadius * (float)Math.Sin(rad) )); } // 计算内圆弧上的点逆时针注意连接处 for (int i segments; i 0; i--) { float angle startAngleDegrees i * angleStep; float rad angle * (float)Math.PI / 180f; points.Add(new PointF( center.X innerRadius * (float)Math.Cos(rad), center.Y innerRadius * (float)Math.Sin(rad) )); } // 最后一个点就是第一个点Path会自动闭合这里我们也可以显式添加以保持完整性 // points.Add(points[0]); return points.ToArray(); } }这个类是一个纯计算器它接收圆心、内外半径、起始角、扫描角和分段数返回一个PointF数组这个数组的顺序已经适合用于构建填充路径。4. 在WinForms (GDI) 中的具体实现在WinForms中我们通常在Paint事件里使用Graphics对象进行绘制。我们将利用上面的RingGeometry来生成点然后用GraphicsPath进行绘制。4.1 创建可重用的绘制方法using System.Drawing; using System.Drawing.Drawing2D; public static class GdiRingDrawer { /// summary /// 在指定的Graphics对象上绘制一个圆环。 /// /summary /// param namegGraphics对象/param /// param namecenter圆心/param /// param nameouterRadius外半径/param /// param nameinnerRadius内半径/param /// param namestartAngle起始角度度0度为3点钟方向/param /// param namesweepAngle扫描角度度顺时针为正/param /// param namefillBrush填充画刷/param /// param nameoutlinePen轮廓画笔可为null/param /// param namesegments分段数默认72/param public static void DrawRing(Graphics g, PointF center, float outerRadius, float innerRadius, float startAngle 0f, float sweepAngle 360f, Brush fillBrush null, Pen outlinePen null, int segments 72) { if (g null) throw new ArgumentNullException(nameof(g)); if (innerRadius 0 || outerRadius 0 || innerRadius outerRadius) throw new ArgumentException(半径参数无效。); // 1. 计算点 var geometry new RingGeometry(); var points geometry.CalculateRingPoints(center, outerRadius, innerRadius, startAngle, sweepAngle, segments); // 2. 构建路径并绘制 using (GraphicsPath path new GraphicsPath()) { path.AddLines(points); path.CloseFigure(); // 显式闭合路径 // 启用抗锯齿 g.SmoothingMode SmoothingMode.AntiAlias; // 填充 if (fillBrush ! null) { g.FillPath(fillBrush, path); } // 描边 if (outlinePen ! null) { g.DrawPath(outlinePen, path); } } } }4.2 在WinForms窗体中的应用示例我们创建一个简单的WinForms应用在窗体上绘制一个渐变色圆环。public partial class MainForm : Form { public MainForm() { InitializeComponent(); this.DoubleBuffered true; // 启用双缓冲防止闪烁 this.Paint MainForm_Paint; this.Resize (s, e) this.Invalidate(); // 窗口大小改变时重绘 } private void MainForm_Paint(object sender, PaintEventArgs e) { Graphics g e.Graphics; PointF center new PointF(this.ClientSize.Width / 2f, this.ClientSize.Height / 2f); float radius Math.Min(center.X, center.Y) * 0.8f; // 取窗口短边的80%作为参考 // 定义圆环参数 float outerRadius radius; float innerRadius radius * 0.6f; float startAngle -90f; // 从12点钟方向开始-90度对应12点 float sweepAngle 270f; // 绘制一个270度的圆弧环常用于进度指示 // 创建渐变画刷 using (LinearGradientBrush brush new LinearGradientBrush( new PointF(center.X - outerRadius, center.Y), new PointF(center.X outerRadius, center.Y), Color.Cyan, Color.Purple)) { // 创建轮廓画笔 using (Pen outlinePen new Pen(Color.DarkGray, 3f)) { // 调用我们的绘制方法 GdiRingDrawer.DrawRing(g, center, outerRadius, innerRadius, startAngle, sweepAngle, brush, outlinePen, 120); // 使用120分段更平滑 } } // 可以再画一个完整的圆环 float smallRingOuterRadius radius * 0.3f; float smallRingInnerRadius radius * 0.2f; using (SolidBrush solidBrush new SolidBrush(Color.FromArgb(180, Color.Gold))) // 带透明度的金色 using (Pen thinPen new Pen(Color.Black, 1f)) { GdiRingDrawer.DrawRing(g, center, smallRingOuterRadius, smallRingInnerRadius, 0f, 360f, solidBrush, thinPen); } } }实操心得一双缓冲与性能在WinForms中直接绘图频繁刷新时容易出现闪烁。设置this.DoubleBuffered true;是解决闪烁问题的标准做法它会在内存中完成整个绘制操作然后一次性输出到屏幕。对于动态圆环如旋转的加载动画除了双缓冲还应考虑使用Timer控制刷新率如60FPS并在Paint事件中只进行必要的绘制避免重复创建Brush和Pen对象。5. 在WPF中的实现利用Path与几何图形WPF的绘图模型与GDI不同它更倾向于声明式和保留模式图形。我们可以使用Path控件其Data属性接受一个Geometry对象。我们将创建一个返回StreamGeometry或PathGeometry的方法。5.1 创建WPF版的几何图形生成器WPF的Point使用的是double类型且坐标系Y轴向下为正。using System.Windows; using System.Windows.Media; public static class WpfRingGeometry { /// summary /// 创建一个表示圆环的PathGeometry。 /// /summary public static PathGeometry CreateRingGeometry(Point center, double outerRadius, double innerRadius, double startAngleDegrees 0, double sweepAngleDegrees 360, int segments 72) { if (innerRadius 0 || outerRadius 0 || innerRadius outerRadius) throw new ArgumentException(半径参数无效。); PathGeometry geometry new PathGeometry(); PathFigure figure new PathFigure(); segments Math.Max(segments, 4); double angleStep sweepAngleDegrees / segments; bool isLargeArc sweepAngleDegrees 180; // 用于ArcSegment但这里我们用线段逼近 // 方法使用PolyLineSegment构建外圆和内圆 // 更精确的做法是使用ArcSegment但为了与GDI算法一致我们仍用多边形逼近 PointCollection points new PointCollection(); // 外圆上的点顺时针 for (int i 0; i segments; i) { double angle startAngleDegrees i * angleStep; double rad angle * Math.PI / 180.0; points.Add(new Point( center.X outerRadius * Math.Cos(rad), center.Y outerRadius * Math.Sin(rad) // WPF Y轴向下 )); } // 内圆上的点逆时针 for (int i segments; i 0; i--) { double angle startAngleDegrees i * angleStep; double rad angle * Math.PI / 180.0; points.Add(new Point( center.X innerRadius * Math.Cos(rad), center.Y innerRadius * Math.Sin(rad) )); } figure.StartPoint points[0]; figure.Segments.Add(new PolyLineSegment(points.Skip(1), true)); // isStroked为true figure.IsClosed true; figure.IsFilled true; geometry.Figures.Add(figure); // 设置填充规则为EvenOdd这对于有“洞”的形状是必要的 geometry.FillRule FillRule.EvenOdd; geometry.Freeze(); // 如果几何图形不会改变冻结它可以提高性能 return geometry; } }5.2 在XAML和代码中使用方式一纯代码动态创建// 在Window的构造函数或某个事件中 Path myRingPath new Path(); myRingPath.Stroke Brushes.DarkGray; myRingPath.StrokeThickness 2; myRingPath.Fill new LinearGradientBrush(Colors.Cyan, Colors.Purple, 0); Point center new Point(200, 200); myRingPath.Data WpfRingGeometry.CreateRingGeometry(center, 100, 60, -90, 270, 120); myCanvas.Children.Add(myRingPath); // 假设有一个名为myCanvas的Canvas方式二结合ValueConverter在XAML中绑定更WPF风格创建一个RingGeometryConverter将圆心、半径等参数转换为Geometry然后在XAML中通过绑定设置Path.Data。这更复杂但更符合MVVM模式。方式三使用自定义控件这是最优雅的方式。我们可以创建一个Ring控件继承自Shape或FrameworkElement为其定义InnerRadius、OuterRadius、StartAngle、EndAngle等依赖属性并在OnRender或DefiningGeometry中生成几何图形。public class Ring : Shape { public static readonly DependencyProperty InnerRadiusProperty DependencyProperty.Register(InnerRadius, typeof(double), typeof(Ring), new FrameworkPropertyMetadata(20.0, FrameworkPropertyMetadataOptions.AffectsRender)); public static readonly DependencyProperty OuterRadiusProperty DependencyProperty.Register(OuterRadius, typeof(double), typeof(Ring), new FrameworkPropertyMetadata(50.0, FrameworkPropertyMetadataOptions.AffectsRender)); public double InnerRadius { get { return (double)GetValue(InnerRadiusProperty); } set { SetValue(InnerRadiusProperty, value); } } public double OuterRadius { get { return (double)GetValue(OuterRadiusProperty); } set { SetValue(OuterRadiusProperty, value); } } protected override Geometry DefiningGeometry { get { Point center new Point(OuterRadius, OuterRadius); // 以控件左上角为原点偏移 // 注意这里简化了实际应考虑ActualWidth/Height和Stretch属性 // 更健壮的实现应计算基于RenderSize的中心点 center new Point(RenderSize.Width / 2, RenderSize.Height / 2); return WpfRingGeometry.CreateRingGeometry(center, OuterRadius, InnerRadius, 0, 360); } } }然后在XAML中就可以像使用Ellipse一样使用它local:Ring InnerRadius30 OuterRadius80 StrokeBlack StrokeThickness1 FillLightBlue/实操心得二WPF的坐标与布局在WPF中自定义绘图控件时必须仔细考虑DefiningGeometry的坐标系。它通常以控件的左上角(0,0)为原点。为了让圆环在控件中居中我们需要根据RenderSize动态计算圆心。此外Shape基类提供了Stretch属性可以自动缩放几何图形以填充可用空间这在很多场景下非常有用。我们的自定义Ring控件可以重写DefiningGeometry的逻辑来支持Stretch。6. 高级话题与性能优化一个基础的圆环绘制出来之后我们往往会遇到更复杂的需求和性能挑战。6.1 动态圆环与动画圆环常用于表示进度0%-100%。实现一个进度环的关键在于动态改变sweepAngle扫描角。在WinForms中你可以在Timer.Tick事件中更新角度并调用this.Invalidate()。在WPF中你可以使用DoubleAnimation来动画化自定义Ring控件的EndAngle依赖属性。WPF进度环动画示例// 假设我们扩展了Ring控件添加了StartAngle和EndAngle属性 public class ProgressRing : Ring { public static readonly DependencyProperty ProgressProperty DependencyProperty.Register(Progress, typeof(double), typeof(ProgressRing), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender, OnProgressChanged)); public double Progress { get { return (double)GetValue(ProgressProperty); } set { SetValue(ProgressProperty, value); } } private static void OnProgressChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { // 当Progress变化时更新EndAngle例如Progress0.75 - EndAngle270度 ((ProgressRing)d).EndAngle 360.0 * (double)e.NewValue; } // ... 省略其他代码需要添加StartAngle和EndAngle依赖属性并在DefiningGeometry中使用它们 }在XAML中你可以用故事板动画Progress属性。6.2 抗锯齿与像素对齐在GDI中Graphics.SmoothingMode SmoothingMode.AntiAlias能有效消除锯齿。但要注意绘制细线如1像素宽的边框时开启抗锯齿可能会导致线条模糊。有时需要根据情况切换。 在WPF中抗锯齿默认是开启的且质量通常很高。但要注意SnapsToDevicePixels和UseLayoutRounding属性它们会影响控件和线条的对齐避免在某些DPI下出现模糊或半像素渲染的问题。对于需要锐利边缘的图形可以尝试设置RenderOptions.EdgeModeAliased。6.3 性能考量缓存与重绘频繁绘制的优化缓存Geometry/GraphicsPath如果圆环的形状半径、角度不经常变化但需要每帧重绘如动画务必在初始化时创建一次GraphicsPath或PathGeometry并缓存起来而不是在每次Paint或OnRender中重新计算。在WPF中对不变的Geometry调用Freeze()是标准做法。减少图形对象创建在WinForms的Paint事件中避免重复创建Brush、Pen、GraphicsPath。将它们作为成员变量在初始化时创建并在控件销毁时释放。脏矩形更新如果只有圆环的一部分在变化比如进度条在增长可以只重绘受影响的那一小块区域而不是整个控件。在WinForms中使用Invalidate(Rectangle)在WPF中复杂的自定义渲染可能需要自己计算脏区域。6.4 扩展带圆角的圆环跑道形有时我们需要圆环的横截面是圆角而不是尖锐的直角。这无法通过简单的多边形填充实现。一种高级技巧是使用GraphicsPath的Widen方法或者更直接地使用两个GraphicsPath一个用于外轮廓用粗画笔绘制一个用于内轮廓用背景色画笔绘制但这种方法有背景依赖。更通用的方法是使用GraphicsPath结合Pen的LineJoin属性设置为Round来绘制环的轮廓然后填充但这需要精确计算路径。对于WPF可以使用Pen的LineJoin属性配合PenLineJoin.Round来绘制轮廓但填充内部区域仍然是个挑战。一个更可行的方案是分别计算内外圆的路径然后使用CombineGeometry的Exclude模式用外圆几何图形“减去”内圆几何图形得到一个真正的环状几何图形然后对这个几何图形应用一个很粗的、圆角连接的描边(Stroke)同时设置StrokeStartLineCap和StrokeEndLineCap为PenLineCap.Round并将StrokeThickness设置为(OuterRadius - InnerRadius)。这样描边本身就构成了一个圆角环。不过这种方法绘制的是“描边”而非“填充”在需要纯色填充时可能不适用。7. 常见问题与排查技巧实录在实际开发中你肯定会遇到一些意想不到的问题。下面是我总结的几个典型坑和解决方法。问题1圆环填充颜色溢出中间没有镂空变成实心圆。原因点序列的顺序错误导致图形系统无法正确判断填充区域。或者在WPF中FillRule设置不正确。排查首先检查CalculateRingPoints方法返回的点序。必须是外圆顺时针或逆时针一圈然后紧接着内圆逆时针或顺时针一圈形成连续的、环绕的边界。可以尝试将点列表可视化打印出来或者用细线将点连起来看看路径形状。解决确保点序正确。在WPF中尝试将PathGeometry.FillRule设置为FillRule.EvenOdd。问题2圆环边缘有锯齿不光滑。原因抗锯齿未开启或分段数(segments)设置过低。解决GDI在绘制前设置g.SmoothingMode SmoothingMode.AntiAlias。WPF抗锯齿默认开启检查RenderOptions相关设置是否被覆盖。增加segments参数。对于半径100像素的圆72分段通常足够半径更大或对质量要求极高时可增至120或180。问题3绘制动态圆环时界面卡顿或闪烁严重。原因在每一帧中都进行了昂贵的计算如重新计算所有点、创建新的画刷/画笔/路径且没有使用双缓冲。解决WinForms务必设置Control.DoubleBuffered true。将计算和图形对象创建移到绘图循环之外如构造函数中只更新角度等变量。WPFWPF本身是保留模式性能较好。但如果在OnRender或CompositionTarget.Rendering事件中做复杂计算也会卡顿。应缓存Geometry并使用DispatcherTimer或CompositionTarget.Rendering控制一个合理的帧率如60Hz在回调中只更新依赖属性依赖属性变化触发重绘。通用使用性能分析工具如Visual Studio的诊断工具找出热点代码。问题4在WPF中自定义Ring控件大小改变时圆环不居中或变形。原因在DefiningGeometry中圆心或半径使用了固定值没有根据控件的实际渲染尺寸(RenderSize)动态计算。解决在DefiningGeometry的getter中根据RenderSize和Stretch属性动态计算圆心和半径。例如要绘制一个占满控件空间的圆环外半径应为Math.Min(RenderSize.Width, RenderSize.Height) / 2圆心为(RenderSize.Width/2, RenderSize.Height/2)。问题5圆环的轮廓线粗细不均匀内圈看起来比外圈细。原因这是透视上的错觉因为内圈周长小相同的笔触宽度在视觉上会显得更“密集”。此外如果使用DrawPath绘制轮廓整个路径的描边是均匀的但内外圈的“边”其实共享了同一段路径的描边。解决如果要求绝对精确的等宽“环壁”上述多边形填充法绘制的轮廓无法直接实现。需要换一种思路分别绘制内外两个独立的圆或圆弧并分别描边。但这又回到了“如何填充环状区域”的问题。对于需要精确等宽环壁且带描边的场景一个变通方法是先填充圆环无描边然后分别用同一个Pen绘制外圆和内圆的轮廓DrawEllipse或DrawArc。这样内外轮廓的视觉宽度就是一致的。最后分享一个我个人的小技巧在开发复杂的自定义图形控件时我通常会先创建一个“调试绘制”模式在这个模式下我会用不同的颜色绘制出计算出的所有点、辅助线、边界框等。这能让你一眼就看清楚算法的输出是否正确对于排查几何问题有奇效。例如在DrawRing方法里可以加一个bool debug参数如果为真就用小圆圈把所有的PointF画出来。视觉化的调试往往比在脑子里空想要高效得多。