如何绘制指定百分比圆弧?基于Path与ArcSegment的技术问询
正确绘制任意百分比圆弧的实现方案
兄弟,太懂你手动硬算非特殊角度端点坐标的痛苦了!其实完全不用自己费劲推导公式,ArcSegment本身就为我们封装了绘制圆弧的核心逻辑,咱们直接利用它的属性就能轻松搞定任意百分比的圆弧,根本不用纠结三角函数的计算细节。
核心思路:利用ArcSegment的内置属性
首先明确几个关键对应关系:
- 完整圆是360°,所以N%的圆弧对应的角度就是
360 * (N/100)(比如20%就是72°) - 要画正圆的话,
ArcSegment的Size属性的宽和高设为相同值(即圆弧半径) IsLargeArc:当圆弧角度>180°时设为true,≤180°时设为false(0-90°区间直接用false)SweepDirection:控制圆弧的绘制方向,一般用SweepDirection.Clockwise即可
代码实现示例(以WPF为例)
1. 动态生成任意百分比圆弧的C#方法
这个方法可以根据你需要的百分比、半径、圆心坐标,直接生成对应的圆弧路径:
public PathGeometry CreateArcGeometry(double percentage, double radius, Point center) { if (percentage is < 0 or > 100) throw new ArgumentOutOfRangeException(nameof(percentage), "百分比必须在0-100之间"); // 计算圆弧对应的角度(角度转弧度) double angleDegrees = 360 * (percentage / 100); double angleRadians = angleDegrees * Math.PI / 180; // 起点默认从圆心右侧开始(可根据需求调整起始方向) Point startPoint = new Point(center.X + radius, center.Y); // 计算终点:注意WPF坐标系Y轴向下,所以sin取负号保证顺时针方向正确 Point endPoint = new Point( center.X + radius * Math.Cos(-angleRadians), center.Y + radius * Math.Sin(-angleRadians) ); var pathFigure = new PathFigure { StartPoint = startPoint }; var arcSegment = new ArcSegment { Point = endPoint, Size = new Size(radius, radius), // 正圆,宽高均为半径 RotationAngle = 0, IsLargeArc = angleDegrees > 180, SweepDirection = SweepDirection.Clockwise }; pathFigure.Segments.Add(arcSegment); var geometry = new PathGeometry(); geometry.Figures.Add(pathFigure); return geometry; }
2. XAML中固定百分比的圆弧示例
如果是固定20%的圆弧,也可以直接在XAML中写死(数值提前计算好):
<Path Stroke="DarkBlue" StrokeThickness="3"> <Path.Data> <PathGeometry> <PathFigure StartPoint="100,100"> <!-- 圆心(50,100),半径50,起点在右侧(100,100) --> <ArcSegment Point="60.77,55.22" <!-- 72°对应的终点坐标,由三角函数计算得出 --> Size="50,50" RotationAngle="0" IsLargeArc="False" SweepDirection="Clockwise" /> </PathFigure> </PathGeometry> </Path.Data> </Path>
关键注意事项
- 坐标系差异:不同UI框架的坐标系可能不同(比如WPF/Y轴向下,WinForms/Y轴向上),调整终点计算时的符号即可适配
- 起始方向调整:如果需要从顶部/左侧等其他方向开始绘制,只需要修改起点的计算逻辑,比如顶部起点为
(center.X, center.Y - radius),对应的终点角度计算也要同步调整 - 大圆弧处理:当百分比>50%(即角度>180°)时,一定要把
IsLargeArc设为true,否则会绘制短的那段弧,不符合预期
这种方式比自己推导公式要可靠得多,不管是20%还是任意复杂百分比的圆弧,都能准确绘制。
内容的提问来源于stack exchange,提问作者Null Reference Exception




