How to draw a full ellipse in a StreamGeometry in WPF?

Question

The only method in a StreamGeometryContext that seems related to ellipses is the ArcTo method. Unfortunately it is heavily geared to joining lines rather than drawing ellipses.

In particular, the position of the arc is determined by a starting and ending point. For a full ellipse the two coincide obviously, and the exact orientation becomes undefined.

So far the best way of drawing an ellipse centered on 100,100 of size 10,10 that I found is like this:

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

Which is pretty ugly, and also leaves a small "flat" area (although not visible at normal zoom levels).

How else might 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 attempt to reduce the "flat" area. Another consideration is that arc drawing is slower than Bezier drawing on modern hardware. This most modern systems use four bezier curves to approximate an ellipse rather than drawing a true ellipse.

You can see that WPF's EllipseGeometry does this by executing the following code, breaking on the DrawBezierFigure method call, 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 a simple way to draw an efficient ellipse into a StreamGeometry, but is very special-case code. In actual practice I use several general-purpose extension methods defined for drawing an arbitrary Geometry into 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 compute the points yourself. The best approximation to an ellipse is found by setting the control points to (Math.Sqrt(2)-1)*4/3 of the radius. So you can explicitly compute the points and draw the 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 would be to use two ArcTo calls, but as I mentioned before this is less efficient. I'm sure you can figure out the details of the two ArcTo calls if you want to go that way.