How to draw a full ellipse in StreamGeometry in WPF?

Question

The only method in the StreamGeometryContext that seems to be associated with ellipses is the ArcTo method. Unfortunately, it is strongly focused on combining lines, rather than drawing ellipses.

In particular, the position of the arc is determined by the start and end points. For a full ellipse, the two coincide, obviously, and the exact orientation becomes undefined.

So far, the best way to draw an ellipse centered at 100 100 of size 10.10, which I have found, is as follows:

 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); } 

This is pretty ugly and also leaves a small “flat” area (although it is not visible at normal zoom levels).

How else can I draw a full ellipse using StreamGeometryContext ?

Answer 1

As you noted, ArcTo cannot draw a complete ellipse. In fact, it becomes numerically unstable as you try to reduce the “flat” area. Another consideration is that the arc pattern is slower than Bezier, based on modern equipment. These most advanced systems use four Bezier curves to approximate an ellipse rather than drawing a true ellipse.

You can see that WPF EllipseGeometry does this by executing the following code, breaking the call to the DrawBezierFigure method and examining the PathFigure in the debugger:

 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); } 

The above code is an easy way to draw an efficient ellipse in StreamGeometry, but this is special code. In practice, I use several general-purpose extension methods, defined for drawing arbitrary geometry in a StreamGeometryContext, so I can simply write:

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

Here is the implementation of the DrawGeometry extension method:

 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; } } } } 

Another alternative is to calculate the points themselves. The best approximation to the ellipse is determined by setting the control points at (Math.Sqrt (2) -1) * 4/3 of the radius. Thus, you can explicitly calculate the points and draw Bezier as follows:

 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); 

Another option is to use two ArcTo calls, but, as I said, this is less efficient. I'm sure you can find out the details of the two ArcTo calls if you want to go this route.