Как нарисовать полный эллипс в StreamGeometry в WPF?

Question

Единственный метод в StreamGeometryContext, который, похоже, связан с эллипсами, - это метод ArcTo. К сожалению, он в значительной степени ориентирован на объединение линий, а не на рисование эллипсов.

В частности, положение дуги определяется начальной и конечной точкой. Для полного эллипса они, очевидно, совпадают, и точная ориентация становится неопределенной.

Пока лучший способ рисования эллипса с центром на 100 100 размера 10,10, который я нашел, выглядит так:

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 не может нарисовать полный эллипс. Фактически это становится численно нестабильным, когда вы пытаетесь уменьшить «плоскую» область. Другое соображение заключается в том, что рисование дуги медленнее, чем рисование Безье на современном оборудовании. Эти самые современные системы используют четыре кривых Безье для аппроксимации эллипса, а не для построения истинного эллипса.

Вы можете видеть, что EllipseGeometry WPF делает это, выполняя следующий код, прерывая вызов метода 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, если хотите пойти по этому пути.