Introduction

Rectangles, Rounded Rectangles and Ellipses in Windows can only be drawn by GDI as axis-aligned figures. If one wishes to draw rotated or skewed figures under Windows NT, one can use World Transforms but they are unfortunately not available under Windows 95/98. For a cross-platform solution, one needs to do more of the work oneself. Rectangles can be simulated trivially using polygons with four vertices, which can then be rotated or skewed. However, what is one do for ellipses? There are basically three choices:

Alternatives

• Use a custom function to draw the ellipse.

  The mathematics for ellipses are relatively simple and there are modified Bresenham equations for rotated ellipses in standard texts. However, this means that one must perform the rasterization oneself, which can get complicated for thick lines. This amount of effort is probably only worthwhile if one is already drawing to an off-screen surface (e.g. DirectDraw) or a bitmap.

• Drawing ellipses as connected line segments.

  The actual lines can be drawn via LineTo(...) or Polyline(...) GDI calls. One can perform the approximation of the ellipses oneself or take advantage of the GDI FlattenPath(...) function.

• Use cubic bezier curves to approximate ellipses.

  This is the method illustrated here.

Drawing ellipses as connected bezier curves

Using just four bezier curves, each representing 90 degrees of the original axis-aligned ellipse, one can arrive at a fair approximation with a maximum error of just 0.027%. This is equivalent to a maximum error of less than one pixel for ellipses with radii up to 3700, more than enough accuracy for our purposes.

Advantages

1. Simplicity.

   Only four GDI calls are needed. The calculations of the bezier control points are trivial.

2. Speed.

   One can take advantage of hardware support of curve drawing on newer video cards. On my system, this is as fast as, if not faster than, GDI calls to Ellipse(...)

3. Transformations.

   Because bezier curves are invariant under rotation, scaling and translation, one only needs to transform the control points to apply the same transformations to one's ellipse. More precisely, since each point on a cubic bezier curve is a barycentric combination of the control points, the relationship of the curve to the control points is not changed under affine maps.

4. Device independence.

   If one is converting ellipses to line segments or rasterizing oneself, each time the resolution of one's surfaces or device context changes (for example when drawing to a printer DC), one must re-rasterize. This is not necessary with bezier curves. An additional advantage is that the ellipses can be exported via metafiles to drawing programmes such as CORELDRAW, which can then scale the figures without gross distortions or artefacts.

Procedure

First start off with a rectangle bounding an axis aligned ellipse (as in a normal GDI call). The thirteen bezier control points (labelled 0-12 below) defining the four bezier curves making up the ellipse can be calculated easily using an empirically derived "magical constant". The following code produces the control points for mapping modes where +ve Y is downwards (e.g. MM_TEXT). Where the opposite is true, just have a negative y value for the offset variable as indicated in the comments.

// Create points to simulate ellipse using beziers
void EllipseToBezier(CRect& r, CPoint* cCtlPt)
{
    // MAGICAL CONSTANT to map ellipse to beziers
    //  			2/3*(sqrt(2)-1) 
    const double EToBConst =	0.2761423749154;

    CSize offset((int)(r.Width() * EToBConst), (int)(r.Height() * EToBConst));
//  Use the following line instead for mapping systems where +ve Y is upwards
//  CSize offset((int)(r.Width() * EToBConst), -(int)(r.Height() * EToBConst));

    CPoint centre((r.left + r.right) / 2, (r.top + r.bottom) / 2);

    cCtlPt[0].x  =                            //------------------------/
    cCtlPt[1].x  =                            //                        /
    cCtlPt[11].x =                            //        2___3___4       /
    cCtlPt[12].x = r.left;                    //     1             5    /
    cCtlPt[5].x  =                            //     |             |    /
    cCtlPt[6].x  =                            //     |             |    /
    cCtlPt[7].x  = r.right;                   //     0,12          6    /
    cCtlPt[2].x  =                            //     |             |    /
    cCtlPt[10].x = centre.x - offset.cx;      //     |             |    /
    cCtlPt[4].x  =                            //    11             7    /
    cCtlPt[8].x  = centre.x + offset.cx;      //       10___9___8       /
    cCtlPt[3].x  =                            //                        /
    cCtlPt[9].x  = centre.x;                  //------------------------*

    cCtlPt[2].y  =
    cCtlPt[3].y  =
    cCtlPt[4].y  = r.top;
    cCtlPt[8].y  =
    cCtlPt[9].y  =
    cCtlPt[10].y = r.bottom;
    cCtlPt[7].y  =
    cCtlPt[11].y = centre.y + offset.cy;
    cCtlPt[1].y  =
    cCtlPt[5].y  = centre.y - offset.cy;
    cCtlPt[0].y  =
    cCtlPt[12].y =
    cCtlPt[6].y  = centre.y;
}

// LDPoint is an equivalent type to CPoint but with floating point precision
void Rotate(double radians, const CPoint& c, CPoint* vCtlPt, unsigned Cnt)
{
    double sinAng           = sin(radians);
    double cosAng           = cos(radians);
    LDPoint constTerm(      c.x - c.x * cosAng - c.y * sinAng,
                            c.y + c.x * sinAng - c.y * cosAng);

    for (int i = Cnt-1; i>=0; --i)
    {
        vCtlPt[i] = (LDPoint(   vCtlPt[i].x * cosAng + vCtlPt[i].y * sinAng,
                               -vCtlPt[i].x * sinAng + vCtlPt[i].y * cosAng) + constTerm).GetCPoint();
    }
}

// Create Ellipse
CRect rect; GetClientRect(&rect);
CPoint ellipsePts[13];
EllipseToBezier(ellipseR, ellipsePts);

// Rotate
Rotate(m_Radians, midPoint, ellipsePts, 13);

Filled Ellipses

Of course, four bezier curves together only make up the outline of an ellipse, whether rotated or not. Thankfully, Win32 Path functions are there for filled ellipses. One only needs to enclose the PolyBezier(...) call in a Path Bracket. The resulting path can be stroked and filled to one's satisfaction. If one is feeling adventurous, further special fills like gradients, custom bitmaps or fractals etc. can be achieved by first setting the clipping region to the path via SelectClipPath(...).

dc.BeginPath();
dc.PolyBezier(ellipsePts);
dc.EndPath();
dc.StrokePath;
// or FillPath();
// or StrokeAndFillPath();
// or PathToRegion(dc.m_hDC);

Thick Dashed or Dotted Ellipses Outlines under Win95/8

Win95/8 only supports solid thick lines. However, dashed or dotted ellipse outlines can easily be simulated with a series of bezier segments.

Tools:

Add www.codeguru.com to your favorites Add www.codeguru.com to your browser search box IE 7 | Firefox 2.0 | Firefox 1.5.x Receive news via our XML/RSS feed