Graphics2D Drawing on Windows Mobile

• Download example - 152.39 KB
• Download doc - 1.64 MB

Introduction

Some drawing features like LineCap, LineJoin, Brush, TextBrush, Path are not available on Windows Mobile Compact Framework. Refer to the following diagram:

Guidebee Graphics 2D Library (which is free) fills the Gap. It provides a high-efficiency Drawing 2D library for Windows mobile. It has similar interface as its .NET Framework Desktop version.

Background

When we try to port our Vector Map API to Windows mobile platform, we found there's lack of Drawing 2D library on Windows mobile Compact framework. It brings some difficulties when drawing the road (polyline) and area (polygon). The linecap, linejoin are not supported. Then we decided to port the Graphics2D library also.

Graphics 2D Samples --Basic

Graphics 2D API uses Graphics2D class as its drawing canvas. it actually renders the picture in an int array. This design makes it kind of platform independent.
After the picture is drawn on the graphics 2D canvas, it needs to be rendered on the actual screen.

Windows Mobile doesn't provide an API to draw an RGB int array directly.

Here's a way to draw an int RGB array on screen. each rgb int is a 32 bit integer, stands for AAAARRRRGGGGBBBB, alpha, red, green and the blue component.

/// <summary>
/// Graphics 2D Object
/// </summary>
private readonly Graphics2D graphics2D;

/// <summary>
/// screen width
/// </summary>
private readonly int screenWidth;

/// <summary>
/// screen Height
/// </summary>
private readonly int screenHeight;
.....
screenWidth = Width;
screenHeight = Height;
graphics2D = new Graphics2D(screenWidth, screenHeight);

private void MainForm_Paint(object sender, PaintEventArgs e)
{
    DrawRGB(e.Graphics, graphics2D.Argb, 0, 0, screenWidth, screenHeight);
}

////////////////////////////////////////////////////////////////////////////
//--------------------------------- REVISIONS ------------------------------
// Date       Name                 Tracking #         Description
// ---------  -------------------  -------------      ----------------------
// 24SEP2010  James Shen                               Code review
////////////////////////////////////////////////////////////////////////////
/// <summary>
/// Draws the RGB.
/// </summary>
/// <param name="graphics">The graphics.</param>
/// <param name="rgbData">The RGB data.</param>
/// <param name="x">The x.</param>
/// <param name="y">The y.</param>
/// <param name="w">The w.</param>
/// <param name="h">The h.</param>
private static void DrawRGB(Graphics graphics, int[] rgbData, int x, int y, int w, int h)
{
    Bitmap bmp = new Bitmap(w, h);
    System.Drawing.Rectangle rect = 
	new System.Drawing.Rectangle(0, 0, bmp.Width, bmp.Height);
    BitmapData bmpData =
    bmp.LockBits(rect, ImageLockMode.ReadWrite, PixelFormat.Format32bppRgb);
    IntPtr ptr = bmpData.Scan0;
    System.Runtime.InteropServices.Marshal.Copy(rgbData, 0, ptr, rgbData.Length);
    bmp.UnlockBits(bmpData);
    graphics.DrawImage(bmp, x, y);
}

Example --Colors

The example shows how to draw with colors:

/**
 * The solid (full opaque) red color in the ARGB space
 */
Color redColor = new Color(0xffff0000, false);

/**
 * The semi-opaque green color in the ARGB space (alpha is 0x78)
 */
Color greenColor = new Color(0x7800ff00, true);

/**
 * The semi-opaque blue color in the ARGB space (alpha is 0x78)
 */
Color blueColor = new Color(0x780000ff, true);
/**
 * The semi-opaque yellow color in the ARGB space ( alpha is 0x78)
 */
Color yellowColor = new Color(0x78ffff00, true);

/**
 * The dash array
 */
int[] dashArray = { 20, 8 };
graphics2D.Reset();
graphics2D.Clear(Color.Black);
SolidBrush brush = new SolidBrush(redColor);
graphics2D.FillOval(brush, 30, 60, 80, 80);
brush = new SolidBrush(greenColor);
graphics2D.FillOval(brush, 60, 30, 80, 80);
Pen pen = new Pen(yellowColor, 10, Pen.CapButt, Pen.JoinMiter, dashArray, 0);
brush = new SolidBrush(blueColor);
graphics2D.SetPenAndBrush(pen, brush);
graphics2D.FillOval(null, 90, 60, 80, 80);
graphics2D.DrawOval(null, 90, 60, 80, 80);
Invalidate(); 

Example --LineCap

The LineCap shows how to draw lines with different line cap styles:

Color blackColor = new Color(0x000000);
Color whiteColor = new Color(0xffffff);
graphics2D.Reset();
graphics2D.Clear(Color.White);

Pen pen = new Pen(blackColor, 20, Pen.CapButt, Pen.JoinMiter);
graphics2D.DrawLine(pen, 40, 60, 140, 60);
pen = new Pen(whiteColor, 1);
graphics2D.DrawLine(pen, 40, 60, 140, 60);

pen = new Pen(blackColor, 20, Pen.CapRound, Pen.JoinMiter);
graphics2D.DrawLine(pen, 40, 100, 140, 100);
pen = new Pen(whiteColor, 1);
graphics2D.DrawLine(pen, 40, 100, 140, 100);

pen = new Pen(blackColor, 20, Pen.CapSquare, Pen.JoinMiter);
graphics2D.DrawLine(pen, 40, 140, 140, 140);
pen = new Pen(whiteColor, 1);
graphics2D.DrawLine(pen, 40, 140, 140, 140);
Invalidate(); 

Example --Pear

In this example, Area objects construct a pear shape from several ellipses.

Ellipse circle, oval, leaf, stem;
Area circ, ov, leaf1, leaf2, st1, st2;
circle = new Ellipse();
oval = new Ellipse();
leaf = new Ellipse();
stem = new Ellipse();
circ = new Area(circle);
ov = new Area(oval);
leaf1 = new Area(leaf);
leaf2 = new Area(leaf);
st1 = new Area(stem);
st2 = new Area(stem);
graphics2D.Reset();
graphics2D.Clear(Color.White);
int w = screenWidth;
int h = screenHeight;
int ew = w / 2;
int eh = h / 2;
SolidBrush brush = new SolidBrush(Color.Green);
graphics2D.DefaultBrush = brush;
// Creates the first leaf by filling the intersection of two Area
//objects created from an ellipse.
leaf.SetFrame(ew - 16, eh - 29, 15, 15);
leaf1 = new Area(leaf);
leaf.SetFrame(ew - 14, eh - 47, 30, 30);
leaf2 = new Area(leaf);
leaf1.Intersect(leaf2);
graphics2D.Fill(null, leaf1);

// Creates the second leaf.
leaf.SetFrame(ew + 1, eh - 29, 15, 15);
leaf1 = new Area(leaf);
leaf2.Intersect(leaf1);
graphics2D.Fill(null, leaf2);

brush = new SolidBrush(Color.Black);
graphics2D.DefaultBrush = brush;

// Creates the stem by filling the Area resulting from the
//subtraction of two Area objects created from an ellipse.
stem.SetFrame(ew, eh - 42, 40, 40);
st1 = new Area(stem);
stem.SetFrame(ew + 3, eh - 47, 50, 50);
st2 = new Area(stem);
st1.Subtract(st2);
graphics2D.Fill(null, st1);

brush = new SolidBrush(Color.Yellow);
graphics2D.DefaultBrush = brush;

// Creates the pear itself by filling the Area resulting from the
//union of two Area objects created by two different ellipses.
circle.SetFrame(ew - 25, eh, 50, 50);
oval.SetFrame(ew - 19, eh - 20, 40, 70);
circ = new Area(circle);
ov = new Area(oval);
circ.Add(ov);
graphics2D.Fill(null, circ);
Invalidate(); 

Points of Interest

There are some other examples in the project like LineJoin, Dashes, Polys, Ovals, Paths. Please refer to the source code.

History

The Drawing 2D library for Windows mobile - you can find more information at www.guidebee.biz.

The current version is 2.0.0 and it's free for commericial usage.