email article printer friendly get the code more resources

Create Complex Images for Small Devices
The .NET Compact Framework lets you use a time-honored technique for composing graphics with transparent areas.
by Bill Wagner

Technology Toolbox: C#, .NET Compact Framework

Q.
I'm a Geographic Information System (GIS) software developer. I used the .NET Compact Framework to build an application that tracks sprayers on a golf course. One of our common GIS constructs—the polygon—uses the Open GIS Consortium definition for geometry objects. A polygon is one outer ring and zero or more inner rings (holes). This reflects real-life golf-course objects, such as sand traps, greens, and ponds.

I wrote a mapping engine in .NET for the desktop that handles the conversion of longitude/latitude to Cartesian real-world coordinates easily, then maps them to the device. GDI+ features let you define holes in polygons easily, and we used the "region" approach. However, this construct doesn't exist in the Compact Framework.

We manage the situation now by ordering our polygons. We draw the large ones first, then the small ones. This works, graphically, assuming we honor topology (polygons' edges never intersect). We draw sand traps over the tops of the larger rough polygons, which is probably faster than drawing the hole. However, we'll need to display background aerial imagery through the hole in a polygon eventually. Must I use bitblt operations to accomplish this task? —Ted Macy

A.
I think the best solution is to create a sprite. A sprite is a bitmap that contains transparent information. All you need to do is create a bitmap whose "holes" you fill with a color that should be interpreted as transparent (see Figure 1).

Download the sample code to see the technique for yourself. You can open a bitmap, then draw the sprite on top of the background. Graphics and video-game applications have used this technique for several years, and it's always effective when you need to draw irregularly shaped objects quickly.

I started working with the sprite technique when I worked on game software many years ago. Drawing sprites uses essentially the same effect that animators use when they draw cell animations. Animators draw on transparent film, then place the film on top of the background image to see what the finished scene will look like. They can place multiple cells on top of the background when they draw multiple characters in the same scene. This enables them to create an entire scene without redrawing the background for each frame. (At 24 frames a second, this saves a lot of work.) The software trick is to create an image that models these transparent films. Then, you draw the transparent film on top of your background image.

The problem is that there's no color defined as "clear." However, a version of DrawImage lets you draw bitmaps that you key as transparent:

ImageAttributes ImageAttribute = new 
   ImageAttributes();
ImageAttribute.SetColorKey (Color.Pink, 
   Color.Pink);

Rectangle destRect = new Rectangle (50, 
   50, _sprite.Width, _sprite.Height);

graphics.DrawImage (_sprite, 
   destRect, 0,0, _sprite.Width, 
   _sprite.Height, GraphicsUnit.Pixel, 
   ImageAttribute);