Click here to Skip to main content
15,860,844 members
Articles / Multimedia / GDI+
Article

Custom AntiAliasing with GDI+

Rate me:
Please Sign up or sign in to vote.
4.89/5 (32 votes)
30 Dec 20044 min read 218.3K   3.2K   84   40
Alternate Antialiasing in GDI+

Image 1

Introduction

I've been using GDI+ now for several years. I primarily use GDI+ when assisting in the development of custom UI's. I've noticed that complex vector graphics are being increasingly incorporated into UIs. The reason for this seems to be that graphic artist love to use antialaising, gradients, blends and transparency to give a "quality feel" to UI. I have strong bias toward the use of vector graphics because they are easy to manipulate and scale at runtime. Because of that we've been using GDI+ for awhile now to create custom UIs. However, I've recently run into several quality issues related to native GDI+ antialiasing that I thought would be of general interest to codeproject readers.

The issues I’ve recently seen are:

  1. Ugly Thumbnails – small vector drawing often look terrible when using the native GDI+ antialiasing. Often they are not easily recognizable from their original, larger images. Especially when the image is very small.
  2. Seams Show – Vector drawings which are constructed by abutting several objects in an attempt to make a seamless transition often have very noticeable artifacts.
  3. Unexpected Artifacts – some vector drawings have unexpected artifacts when antialiased using GDI+. Often these are caused by seams, but thin lines and other graphic elements can cause unpleasant artifacts.

Since my goal when using GDI+ is to produce a very high quality looking image, I needed a way to address these quality issues. Don't get me wrong, I'm not saying that the native GDI+ antialiasing is bad, frankly it's amazingly good and quite fast. However, there are times when it just isn't good enough.

The following sections in this article describe these artifacts in more detail and offer a simple algorithm that can eliminate most of these issues in your images -- at a steep price.

Cleaning Ugly Thumbnails

Image 2

Thumbnails are small images that are often used to help a user see many possible selections at one time. It’s important that thumbnails be easily identifiable when very small; otherwise they are of limited value. Unfortunately the native antialiasing in GDI+ often produces very poor quality thumbnails (See the left and middle images above).

In the image above you can see that Native GDI+ antialiasing about 30% faster than custom antialiasing. Larger images can have up to 10x difference. However the quality of the custom antialiased thumbnail is very high and is much easier to associate with its original, larger image. Because of the increased rendering time, this custom antialiasing technique should only be used when absolutely necessary.

Are Your Seams Showing

Image 3

Another case where GDI+ native antialiasing gets into trouble is when there are seams that are intended to be invisible in your art. This can be caused by several things:

Blends – Blends are essentially a gradient that morphs between two or more shapes. Since GDI+ doesn’t support blends directly they are usually constructed by creating multiple paths, one for each shape change, and filling those paths with the next calculated color in the gradient. Unfortunately this process can produce seams which alias badly when native antialiasing is turned on.

Abutting Objects - It's very common when building web graphics or when skinning an application to build bitmaps that are intended to appear seam-less when the graphics are abutted next to each other. There are times when using vector objects that this same technique would be useful. Unfortunately your seams will most likely show if you turn on antialiasing.

The artifacts that appear tend to be splits in the graphics or odd looking gradients (see examples in the image below).

Image 4

Unexpected Aliasing

The native GDI+ antialiasing has trouble with small lines. In the example below, notice how the lines for the whiskers and around the text are oddly emphasized and aliased. This is not what the original artwork intended. This kind of aliasing gets worse as the image is scaled smaller.

Image 5

The Custom Antialiasing Algorithm

To produce a higher quality image than native GDI+ antialiasing, I use the following algorithm.

  1. Construct an off-screen bitmap that is 2, 4 or 8 times larger that the image I intend to output. It is important to use a power of 2 for the offscreen bitmap.
  2. Draw the vector images scaled appropriately for the larger offscreen bitmap.
  3. Use Graphics.DrawImage with InterpolationMode set to HighQualityBicubic when stretch bliting the image to the smaller value.

The output using this algorithm is significantly better in most cases than the native GDI+ antialiasing method, but with a significant penalty in drawing time.

C#
// Make a 4X offscreen bitmap, power of 2's are important because 
// interpolating other size images takes significantly longer.
Bitmap offscreen = new Bitmap(bounds.Width*4, bounds.Height*4);
Graphics ofg = Graphics.FromImage(offscreen);
                        
//Update transform for additional pixels
Matrix t = m.Clone();
t.Translate(-bounds.Left, -bounds.Top, MatrixOrder.Append);
t.Scale(4.0f, 4.0f, MatrixOrder.Append);
                        
//Do Paint
Paint(ofg, t);                    
                        
//Stretch blit the rendered image to the actual image
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(offscreen, bounds, 0, 0, offscreen.Width, offscreen.Height, 
    GraphicsUnit.Pixel); 

History

  • Originally written on Dec 29th, 2004.

Acknowledgments

The example program associated with this article, uses GDI+ vector graphics code that was created from example files from Adobe Illustrator CS (cheshire cat.ai and crystal.ai) and from Scott Ketterer (aquabutton.ai). I think these examples illustrate very well the complex graphics that are possible using GDI+ vector graphics and issues that can occur when using them.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer (Senior)
United States United States
I work at Tektronix in Beaverton OR. I've been programming for fun since 1975 (I started while in a Computer Explorer Scout group in Spokane WA). I've been programming in C since 1979 and I've been working professionally since 1983.

I really enjoy www.codeproject.com. It has saved me an incredible amount of time. I only hope my small contributions have given back some of what I've taken.

Comments and Discussions

 
QuestionWhat did you use for the images? Pin
i0028-Aug-12 3:22
i0028-Aug-12 3:22 
AnswerRe: What did you use for the images? Pin
Keith Rule28-Aug-12 14:53
professionalKeith Rule28-Aug-12 14:53 
GeneralRe: What did you use for the images? Pin
i0028-Aug-12 14:57
i0028-Aug-12 14:57 
GeneralMy vote of 5 Pin
Manfred Rudolf Bihy18-Feb-11 4:15
professionalManfred Rudolf Bihy18-Feb-11 4:15 
GeneralSmooth Drawing Pin
Youzelin29-Nov-10 17:40
Youzelin29-Nov-10 17:40 
QuestionThe zip file is unable to unzipped,as if it's couurpted. Pin
oinobody26-Jul-10 22:29
oinobody26-Jul-10 22:29 
AnswerRe: The zip file is unable to unzipped,as if it's couurpted. Pin
Tcpip200520-Nov-10 21:02
Tcpip200520-Nov-10 21:02 
QuestionHow can this works for web application? Pin
Rene.DH12-May-07 11:55
Rene.DH12-May-07 11:55 
QuestionAttached zip file is currept Pin
Member 172761717-Oct-05 21:55
Member 172761717-Oct-05 21:55 
AnswerRe: Attached zip file is currept Pin
Keith Rule18-Oct-05 11:49
professionalKeith Rule18-Oct-05 11:49 
Generalreading .ai files Pin
Member 124668513-Mar-05 5:33
Member 124668513-Mar-05 5:33 
GeneralRe: reading .ai files Pin
Keith Rule14-Mar-05 6:13
professionalKeith Rule14-Mar-05 6:13 
GeneralNot entirely correct: pen widths not adjusted. Pin
wout de zeeuw1-Jan-05 7:57
wout de zeeuw1-Jan-05 7:57 
GeneralRe: Not entirely correct: pen widths not adjusted. Pin
Keith Rule2-Jan-05 14:27
professionalKeith Rule2-Jan-05 14:27 
GeneralRe: Not entirely correct: pen widths not adjusted. Pin
Keith Rule3-Jan-05 11:55
professionalKeith Rule3-Jan-05 11:55 
GeneralRe: Not entirely correct: pen widths not adjusted. Pin
wout de zeeuw3-Jan-05 22:46
wout de zeeuw3-Jan-05 22:46 
GeneralRe: Not entirely correct: pen widths not adjusted. Pin
wout de zeeuw4-Jan-05 0:32
wout de zeeuw4-Jan-05 0:32 
GeneralRe: Not entirely correct: pen widths not adjusted. Pin
Keith Rule4-Jan-05 5:36
professionalKeith Rule4-Jan-05 5:36 
Generalvery slow Pin
Mario M.30-Dec-04 22:04
Mario M.30-Dec-04 22:04 
GeneralRe: very slow Pin
Keith Rule2-Jan-05 14:26
professionalKeith Rule2-Jan-05 14:26 
GeneralRe: very slow Pin
Mario M.2-Jan-05 14:56
Mario M.2-Jan-05 14:56 
GeneralRe: very slow Pin
Keith Rule3-Jan-05 6:23
professionalKeith Rule3-Jan-05 6:23 
GeneralRe: very slow Pin
Mario M.3-Jan-05 8:21
Mario M.3-Jan-05 8:21 
GeneralRe: very slow Pin
Keith Rule3-Jan-05 10:17
professionalKeith Rule3-Jan-05 10:17 
GeneralRe: very slow Pin
Jon Rista16-Jan-05 11:45
Jon Rista16-Jan-05 11:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.