为何XAML Path圆弧段拼接成圆时出现错位？

错位根源 #

1. 坐标取整的累积误差：代码中对计算出的nX和nY使用了Math.Round，强制将浮点坐标取整为整数像素。每段弧的起点/终点都会产生微小偏差，多次迭代后偏差不断累积，最终导致路径严重错位。
2. 大角度弧的参数缺失：如果是绘制180度的弧（两点位于直径两端），必须显式设置ArcSegment.IsLargeArc = true，否则WPF会默认绘制短弧（虽然45度分段场景下不影响，但大角度弧必须注意）。

修复代码 #

首先移除坐标取整操作，保留精确的浮点坐标：

double Angle = 0;
double Radius = 150;
Point StartPoint = new Point(150, 0);
Arcs = new ObservableCollection<Path>();

while (Angle < Math.PI * 2)
{
    Angle += Math.PI / 4;

    double adjustedAngle = Angle - Math.PI / 2;
    double nX = Math.Cos(adjustedAngle) * Radius + 150;
    double nY = Math.Sin(adjustedAngle) * Radius + 150;
    Point endPoint = new Point(nX, nY);

    Path p = CreatePath(StartPoint, endPoint);

    StartPoint = endPoint;
    Arcs.Add(p);
}

若需绘制180度单段弧，修改CreatePath中的ArcSegment，添加IsLargeArc属性：

private Path CreatePath(Point start, Point end)
{
    PathSegment ps = new ArcSegment()
    {
        Size = new Size(Radius, Radius),
        Point = end,
        SweepDirection = SweepDirection.Clockwise,
        IsLargeArc = true // 绘制180度弧时必须设置，避免生成不符合预期的短弧
    };

    PathFigure pf = new()
    {
        StartPoint = start,
        IsClosed = false,
        IsFilled = false,
        Segments = new PathSegmentCollection() { ps }
    };

    Geometry g = new PathGeometry()
    {
        Figures = new PathFigureCollection() { pf }
    };

    return new Path()
    {
        Data = g,
        Stroke = new SolidColorBrush(Colors.Black),
        StrokeThickness = 3
    };
}

更优实现方案 #

使用多个Path对象不仅容易产生累积误差，还会降低渲染性能。推荐以下两种更简洁的方案：

方案1：单个Path包含所有弧段 #

将所有弧段整合到一个Path的PathFigure中，彻底避免累积误差：

Path fullCircle = new Path()
{
    Stroke = new SolidColorBrush(Colors.Black),
    StrokeThickness = 3,
    Data = new PathGeometry()
};

PathFigure figure = new PathFigure()
{
    StartPoint = new Point(150, 0),
    IsClosed = false
};

double Angle = 0;
double Radius = 150;
while (Angle < Math.PI * 2)
{
    Angle += Math.PI / 4;
    double adjustedAngle = Angle - Math.PI / 2;
    double nX = Math.Cos(adjustedAngle) * Radius + 150;
    double nY = Math.Sin(adjustedAngle) * Radius + 150;

    figure.Segments.Add(new ArcSegment()
    {
        Size = new Size(Radius, Radius),
        Point = new Point(nX, nY),
        SweepDirection = SweepDirection.Clockwise
    });
}

((PathGeometry)fullCircle.Data).Figures.Add(figure);
// 将fullCircle添加到你的布局容器中

方案2：直接使用EllipseGeometry（最简） #

如果只是需要绘制圆形，完全无需手动拼接弧段，直接使用EllipseGeometry即可：

Path circle = new Path()
{
    Stroke = new SolidColorBrush(Colors.Black),
    StrokeThickness = 3,
    Data = new EllipseGeometry()
    {
        Center = new Point(150, 150),
        RadiusX = 150,
        RadiusY = 150
    }
};

内容的提问来源于stack exchange，提问作者qanpi