如何在WPF中的StreamGeometry中绘制完整的椭圆？

Question

StreamGeometryContext中与椭圆相关的唯一方法是ArcTo方法。不幸的是，它非常适合连接线而不是绘制椭圆。

特别是，弧的位置由起点和终点决定。对于完整的椭圆，两者显然重合，并且确切的方向变得不确定。

迄今为止绘制集中在尺寸10,10的100,100，我发现了一个椭圆形的最好的方法是这样的：

using (var ctx = geometry.Open()) 
{ 
    ctx.BeginFigure(new Point(100+5, 100), isFilled: true, isClosed: true); 
    ctx.ArcTo(
     new Point(100 + 5*Math.Cos(0.01), 100 + 5*Math.Sin(0.01)), // need a small angle but large enough that the ellipse is positioned accurately 
     new Size(10/2, 10/2), // docs say it should be 10,10 but in practice it appears that this should be half the desired width/height... 
     0, true, SweepDirection.Counterclockwise, true, true); 
} 

这是相当丑陋，也留下一个小的“平”面积（尽管在正常缩放级别不可见）。

如何使用StreamGeometryContext绘制完整的椭圆？

Answer 1

如您所述，ArcTo无法绘制完整的椭圆。事实上，当你尝试减少“平坦”区域时，它变得数字不稳定。另一个考虑是弧线绘制比现代硬件上的Bezier绘图要慢。这种最现代的系统使用四条贝塞尔曲线来近似一个椭圆而不是绘制一个真正的椭圆。

你可以看到，WPF的EllipseGeometry通过执行以下代码，上破DrawBezierFigure方法调用，并在调试检查的PathFigure做到这一点：

using(var ctx = geometry.Open()) 
{ 
    var ellipse = new EllipseGeometry(new Point(100,100), 10, 10); 
    var figure = PathGeometry.CreateFromGeometry(ellipse).Figures[0]; 
    DrawBezierFigure(ctx, figure); 
} 

void DrawBezierFigure(StreamGeometryContext ctx, PathFigure figure) 
{ 
    ctx.BeginFigure(figure.StartPoint, figure.IsFilled, figure.IsClosed); 
    foreach(var segment in figure.Segments.OfType<BezierSegment>()) 
    ctx.BezierTo(segment.Point1, segment.Point2, segment.Point3, segment.IsStroked, segment.IsSmoothJoin); 
} 

上面的代码绘制一个简单方法高效的椭圆到StreamGeometry中，但是非常特殊的代码。在实际操作中我用绘制任意几何成StreamGeometryContext定义了几种通用的扩展方法，所以我可以简单地写：

using(var ctx = geometry.Open()) 
{ 
    ctx.DrawGeometry(new EllipseGeometry(new Point(100,100), 10, 10)); 
} 

这里是DrawGeometry扩展方法的实现：

public static class GeometryExtensions 
{ 
    public static void DrawGeometry(this StreamGeometryContext ctx, Geometry geo) 
    { 
    var pathGeometry = geo as PathGeometry ?? PathGeometry.CreateFromGeometry(geo); 
    foreach(var figure in pathGeometry.Figures) 
     ctx.DrawFigure(figure); 
    } 

    public static void DrawFigure(this StreamGeometryContext ctx, PathFigure figure) 
    { 
    ctx.BeginFigure(figure.StartPoint, figure.IsFilled, figure.IsClosed); 
    foreach(var segment in figure.Segments) 
    { 
     var lineSegment = segment as LineSegment; 
     if(lineSegment!=null) { ctx.LineTo(lineSegment.Point, lineSegment.IsStroked, lineSegment.IsSmoothJoin); continue; } 

     var bezierSegment = segment as BezierSegment; 
     if(bezierSegment!=null) { ctx.BezierTo(bezierSegment.Point1, bezierSegment.Point2, bezierSegment.Point3, bezierSegment.IsStroked, bezierSegment.IsSmoothJoin); continue; } 

     var quadraticSegment = segment as QuadraticBezierSegment; 
     if(quadraticSegment!=null) { ctx.QuadraticBezierTo(quadraticSegment.Point1, quadraticSegment.Point2, quadraticSegment.IsStroked, quadraticSegment.IsSmoothJoin); continue; } 

     var polyLineSegment = segment as PolyLineSegment; 
     if(polyLineSegment!=null) { ctx.PolyLineTo(polyLineSegment.Points, polyLineSegment.IsStroked, polyLineSegment.IsSmoothJoin); continue; } 

     var polyBezierSegment = segment as PolyBezierSegment; 
     if(polyBezierSegment!=null) { ctx.PolyBezierTo(polyBezierSegment.Points, polyBezierSegment.IsStroked, polyBezierSegment.IsSmoothJoin); continue; } 

     var polyQuadraticSegment = segment as PolyQuadraticBezierSegment; 
     if(polyQuadraticSegment!=null) { ctx.PolyQuadraticBezierTo(polyQuadraticSegment.Points, polyQuadraticSegment.IsStroked, polyQuadraticSegment.IsSmoothJoin); continue; } 

     var arcSegment = segment as ArcSegment; 
     if(arcSegment!=null) { ctx.ArcTo(arcSegment.Point, arcSegment.Size, arcSegment.RotationAngle, arcSegment.IsLargeArc, arcSegment.SweepDirection, arcSegment.IsStroked, arcSegment.IsSmoothJoin); continue; } 
    } 
    } 
} 

另一种选择是自己计算点。通过将控制点设置为半径的（Math.Sqrt（2）-1）* 4/3来找到椭圆的最佳近似值。所以，你可以明确地计算积分并绘制贝塞尔如下：

const double ControlPointRatio = (Math.Sqrt(2)-1)*4/3; 

var x0 = centerX - radiusX; 
var x1 = centerX - radiusX * ControlPointRatio; 
var x2 = centerX; 
var x3 = centerX + radiusX * ControlPointRatio; 
var x4 = centerX + radiusX; 

var y0 = centerY - radiusY; 
var y1 = centerY - radiusY * ControlPointRatio; 
var y2 = centerY; 
var y3 = centerY + radiusY * ControlPointRatio; 
var y4 = centerY + radiusY; 

ctx.BeginFigure(new Point(x2,y0), true, true); 
ctx.BezierTo(new Point(x3, y0), new Point(x4, y1), new Point(x4,y2), true, true); 
ctx.BezierTo(new Point(x4, y3), new Point(x3, y4), new Point(x2,y4), true, true); 
ctx.BezierTo(new Point(x1, y4), new Point(x0, y3), new Point(x0,y2), true, true); 
ctx.BezierTo(new Point(x0, y1), new Point(x1, y0), new Point(x2,y0), true, true); 

另一种选择是使用两个包含arcTo要求，但正如我之前提到的，这是低效率的。如果你想这样做，我相信你可以弄清楚两个ArcTo调用的细节。