Windows Mobile 上的 Graphics2D 绘图

• 下载示例 - 152.39 KB
• 下载文档 - 1.64 MB

引言

在 Windows Mobile Compact Framework 上，一些绘图特性，如 LineCap、LineJoin、Brush、TextBrush、Path 均不可用。请参考下图

Guidebee Graphics 2D 库（免费）填补了这一空白。它为 Windows Mobile 提供了一个高效的 2D 绘图库，其接口与 .NET Framework 桌面版本类似。

背景

当我们尝试将我们的矢量地图 API 移植到 Windows Mobile 平台时，我们发现 Windows Mobile Compact Framework 上缺少 2D 绘图库。这在绘制道路（多段线）和区域（多边形）时带来了一些困难。线条端点和连接处样式不受支持。因此，我们决定也将 Graphics2D 库移植过来。

Graphics 2D 示例 -- 基本

Graphics 2D API 使用 Graphics2D 类作为其绘图画布。它实际上将图像渲染到一个 int 数组中。这种设计使其具有一定的平台独立性。
在图像绘制到 Graphics 2D 画布后，需要将其渲染到实际屏幕上。

Windows Mobile 没有提供直接绘制 RGB int 数组的 API。

这里有一种在屏幕上绘制 int RGB 数组的方法。每个 rgb int 都是一个 32 位整数，代表 AAAARRRRGGGGBBBB，分别代表 alpha、红色、绿色和蓝色分量。

/// <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);
}

示例 -- 颜色

该示例演示了如何使用颜色进行绘制

/**
 * 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(); 

示例 -- LineCap

LineCap 演示了如何使用不同的线条端点样式绘制线条

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(); 

示例 -- 梨

在这个示例中，Area 对象通过几个椭圆构造一个梨的形状。

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(); 

关注点

项目中还有其他示例，如 LineJoin、虚线、多边形、椭圆、路径。请参考源代码。

历史

适用于 Windows Mobile 的 2D 绘图库 - 您可以在 www.guidebee.biz 上找到更多信息。

当前版本为 2.0.0，可免费用于商业用途。