Silverlight 引路蜂二维图形库示例:概述

jerry Silverligth 2015年11月26日 收藏

Windows Phone 7 并不是Windows Mobile 6.x 的升级版,也就是说 Windows Phone 7 SDK 没有提供对 Windows Mobile .Net Compact Version的向下兼容。“它所带来的后果之一就是,之前的Windows Moible应用程序无法在Windows Phone 7系列上运行。” Windows Phone 7 SDK 是基于Silverlight。因此一些原先定义在.Net Compact Framework中的包和类在 Window Phone 7 SDK 中没有对应的类。比如System.Drawing , System.Drawing.Image 。在Windows Phone 7 SDK 提供类似功能的是 System.Windows.ShapesSystem.Windows.Media.Imaging 。当如果想动态生成二维图形或是图像,Silverlight和 GDI+ 相比不是特别方便。

引路蜂开发包中提供了一个平台无关的高效二维图形库,提供了诸如LineCap, LineJoin, Brush, TextBrush, Path 等类。它的画板为一个二维数组(内部采用一维数组),每个数组元素为一个32位整数,代表ARGB颜色值。Silverlight System.Windows.Media.Imaging 中定义了WriteableBitmap Class ,WriteableBitmap的Pixels属性也是一个整数数组,其定义方法和引路蜂开发包中定义的一致。因此通过WriteableBitmap作为桥梁,就可以把引路蜂开发包Graphics2D绘制的图形图像显示到Silverlight的XAML 的Image 元素中。

下图显示了Silverlight 引路蜂二维图形开发包中定义的包和类。

最后以一个简单的例子说明一下图形包的用法。也可以参见Windows Mobile引路蜂地图开发示例:二维图形库

创建一个Silverlight项目,修改MainPage.xml ,如下所示。

<UserControl x:Class=?SilverlightGraphics2DDemo.MainPage?
    xmlns=?http://schemas.microsoft.com/winfx/2006/xaml/presentation?
    xmlns:x=?http://schemas.microsoft.com/winfx/2006/xaml?
    xmlns:d=?http://schemas.microsoft.com/expression/blend/2008?
    xmlns:mc=?http://schemas.openxmlformats.org/markup-compatibility/2006?
    mc:Ignorable=?d?
    d:DesignHeight=?640? d:DesignWidth=?480?>

    <Grid x:Name=?LayoutRoot? Width=?480? Height=?640?>
        <StackPanel>
            <TextBlock HorizontalAlignment=?Center?
      FontSize=?14? Text=?Silverlight Graphics 2D Demo? />
            <Border Width=?480? Height=?640? Background=?Black?>
                <Image x:Name=?image? Width=?480? Height=?640?/>
            </Border>
        </StackPanel>
    </Grid>
</UserControl>

XAML中定义了一个Image对象用于显示图像显示的结果。

修改MainPage.xaml.cs

  1. using System;
  2. using System.Windows.Controls;
  3. using System.Windows.Media.Imaging;
  4. using Mapdigit.Drawing;
  5. using Mapdigit.Drawing.Geometry;
  6. using Color = Mapdigit.Drawing.Color;
  7. namespace SilverlightGraphics2DDemo
  8. {
  9.     public partial class MainPage : UserControl
  10.     {
  11.         private Graphics2D graphics2D;
  12.         private int screenWidth = 480;
  13.         private int screenHeight = 640;
  14.  
  15.         WriteableBitmap bmp;
  16.         public MainPage()
  17.         {
  18.             InitializeComponent();
  19.             graphics2D = new Graphics2D(screenWidth, screenHeight);
  20.             Ellipse circle, oval, leaf, stem;
  21.             Area circ, ov, leaf1, leaf2, st1, st2;
  22.             circle = new Ellipse();
  23.             oval = new Ellipse();
  24.             leaf = new Ellipse();
  25.             stem = new Ellipse();
  26.             circ = new Area(circle);
  27.             ov = new Area(oval);
  28.             leaf1 = new Area(leaf);
  29.             leaf2 = new Area(leaf);
  30.             st1 = new Area(stem);
  31.             st2 = new Area(stem);
  32.             graphics2D.Reset();
  33.             graphics2D.Clear(Color.White);
  34.             int w = screenWidth;
  35.             int h = screenHeight;
  36.             int ew = w / 2;
  37.             int eh = h / 2;
  38.             SolidBrush brush = new SolidBrush(Color.Green);
  39.             graphics2D.DefaultBrush = brush;
  40.             // Creates the first leaf by filling the intersection of two Area
  41.             //objects created from an ellipse.
  42.             leaf.SetFrame(ew - 16, eh - 29, 15, 15);
  43.             leaf1 = new Area(leaf);
  44.             leaf.SetFrame(ew - 14, eh - 47, 30, 30);
  45.             leaf2 = new Area(leaf);
  46.             leaf1.Intersect(leaf2);
  47.             graphics2D.Fill(null, leaf1);
  48.  
  49.             // Creates the second leaf.
  50.             leaf.SetFrame(ew + 1, eh - 29, 15, 15);
  51.             leaf1 = new Area(leaf);
  52.             leaf2.Intersect(leaf1);
  53.             graphics2D.Fill(null, leaf2);
  54.  
  55.             brush = new SolidBrush(Color.Black);
  56.             graphics2D.DefaultBrush = brush;
  57.  
  58.             // Creates the stem by filling the Area resulting from the
  59.             //subtraction of two Area objects created from an ellipse.
  60.             stem.SetFrame(ew, eh - 42, 40, 40);
  61.             st1 = new Area(stem);
  62.             stem.SetFrame(ew + 3, eh - 47, 50, 50);
  63.             st2 = new Area(stem);
  64.             st1.Subtract(st2);
  65.             graphics2D.Fill(null, st1);
  66.  
  67.             brush = new SolidBrush(Color.Yellow);
  68.             graphics2D.DefaultBrush = brush;
  69.  
  70.             // Creates the pear itself by filling the Area resulting from the
  71.             //union of two Area objects created by two different ellipses.
  72.             circle.SetFrame(ew - 25, eh, 50, 50);
  73.             oval.SetFrame(ew - 19, eh - 20, 40, 70);
  74.             circ = new Area(circle);
  75.             ov = new Area(oval);
  76.             circ.Add(ov);
  77.             graphics2D.Fill(null, circ);
  78.  
  79.             bmp = new WriteableBitmap(screenWidth, screenHeight);
  80.             image.Source = bmp;
  81.             RefreshBitmap();
  82.         }
  83.         private void RefreshBitmap()
  84.         {
  85.             Buffer.BlockCopy(graphics2D.Argb, 0, bmp.Pixels, 0, bmp.Pixels.Length * 4);
  86.         }
  87.  
  88.     }
  89. }

Buffer.BlockCopy(graphics2D.Argb, 0, bmp.Pixels, 0, bmp.Pixels.Length * 4);就是将Graphics2D内部int32数组拷贝到WriteableBitmap的Pixels中。上面代码通过多个几何图形拼成一个梨子如下图所示:

Graphics2D 示例