Facebook Twitter LinkedIn E-mail
magnify
Home Posts tagged "图形系统"

Silverlight 引路蜂二维图形库下载

Silverlight库及例子下载 http://www.guidebee.info/download/silverlight/SilverlightGraphics2DDemo.zip ,库同样可以用于WPF,Windows Phone 7

Install Microsoft Silverlight

  1. Silverlight 引路蜂二维图形库示例:概述
  2. Silverlight 引路蜂二维图形库示例:包定义
  3. Silverlight 引路蜂二维图形库示例:基本知识
  4. Silverlight 引路蜂二维图形库示例:绘制各种几何图形
  5. Silverlight 引路蜂二维图形库示例:颜色
  6. Silverlight 引路蜂二维图形库示例:虚线类型
  7. Silverlight 引路蜂二维图形库示例:线段末端形状(LineCap)
  8. Silverlight 引路蜂二维图形库示例:线段连接类型(LineJoin)
  9. Silverlight 引路蜂二维图形库示例:不同线宽
  10. Silverlight 引路蜂二维图形库示例:椭圆
  11. Silverlight 引路蜂二维图形库示例:多义线和多边形
  12. Silverlight 引路蜂二维图形库示例:路径
  13. Silverlight 引路蜂二维图形库示例:坐标变换
  14. Silverlight 引路蜂二维图形库示例:颜色渐变
  15. Silverlight 引路蜂二维图形库示例:材质画刷
  16. Silverlight 引路蜂二维图形库示例:显示位图
  17. Silverlight 引路蜂二维图形库示例:动画Beziers曲线
  18. Silverlight 引路蜂二维图形库示例:矢量字体
  19. Silverlight 引路蜂二维图形库示例:结束语
 

在Windows Mobile 显示透明 PNG的方法

同样在移植的过程中,发现 .Net compact Framework 不支持透明图像。原本具有透明属性的Png (含有 alpha通道),通过 Graphics.DrawImage 显示之后,不再具有透明特性。这对于地图分层显示带了麻烦。举例来说。带地名卫星地图一般是由两层图片叠加而成。

两个图片叠加形成最后的图片

当由于.Net Compact Framework缺省不支持透明图像,两幅图叠加是 道路图回彻底覆盖掉下面的卫星图。原来的透明色变成白色。 同样如果再有其它图层(比如路径),又覆盖掉道路图。
经过Google 搜索,有两种方法可以实现在Windows mobile 上透明图像的显示。

是通过IImagingFactory 接口

using System;
using System.Drawing;
using System.Runtime.InteropServices;
namespace DotNetPocketStreet.Drawing
{
enum ImageLockMode
{
ImageLockModeRead = 0x0001,
ImageLockModeWrite = 0x0002,
ImageLockModeUserInputBuf = 0x0004
};
// Pulled from gdipluspixelformats.h in the Windows Mobile 5.0 Pocket PC SDK
public enum PixelFormatID : int
{
PixelFormatIndexed       = 0x00010000, // Indexes into a palette
PixelFormatGDI           = 0x00020000, // Is a GDI-supported format
PixelFormatAlpha         = 0x00040000, // Has an alpha component
PixelFormatPAlpha        = 0x00080000, // Pre-multiplied alpha
PixelFormatExtended      = 0x00100000, // Extended color 16 bits/channel
PixelFormatCanonical     = 0x00200000,
PixelFormatUndefined     = 0,
PixelFormatDontCare      = 0,
PixelFormat1bppIndexed   = (1 | ( 1 << 8) | PixelFormatIndexed | PixelFormatGDI),
PixelFormat4bppIndexed   = (2 | ( 4 << 8) | PixelFormatIndexed | PixelFormatGDI),
PixelFormat8bppIndexed   = (3 | ( 8 << 8) | PixelFormatIndexed | PixelFormatGDI),
PixelFormat16bppRGB555   = (5 | (16 << 8) | PixelFormatGDI),
PixelFormat16bppRGB565   = (6 | (16 << 8) | PixelFormatGDI),
PixelFormat16bppARGB1555 = (7 | (16 << 8) | PixelFormatAlpha | PixelFormatGDI),
PixelFormat24bppRGB      = (8 | (24 << 8) | PixelFormatGDI),
PixelFormat32bppRGB      = (9 | (32 << 8) | PixelFormatGDI),
PixelFormat32bppARGB     = (10 | (32 << 8) | PixelFormatAlpha | PixelFormatGDI | PixelFormatCanonical),
PixelFormat32bppPARGB    = (11 | (32 << 8) | PixelFormatAlpha | PixelFormatPAlpha | PixelFormatGDI),
PixelFormat48bppRGB      = (12 | (48 << 8) | PixelFormatExtended),
PixelFormat64bppARGB     = (13 | (64 << 8) | PixelFormatAlpha  | PixelFormatCanonical | PixelFormatExtended),
PixelFormat64bppPARGB    = (14 | (64 << 8) | PixelFormatAlpha  | PixelFormatPAlpha | PixelFormatExtended),
PixelFormatMax           = 15
}
// Pulled from imaging.h in the Windows Mobile 5.0 Pocket PC SDK
public enum BufferDisposalFlag : int
{
BufferDisposalFlagNone,
BufferDisposalFlagGlobalFree,
BufferDisposalFlagCoTaskMemFree,
BufferDisposalFlagUnmapView
}
// Pulled from imaging.h in the Windows Mobile 5.0 Pocket PC SDK
public enum InterpolationHint : int
{
InterpolationHintDefault,
InterpolationHintNearestNeighbor,
InterpolationHintBilinear,
InterpolationHintAveraging,
InterpolationHintBicubic
}
// Pulled from gdiplusimaging.h in the Windows Mobile 5.0 Pocket PC SDK
public struct BitmapData
{
public uint Width;
public uint Height;
public int Stride;
public PixelFormatID PixelFormat;
public IntPtr Scan0;
public IntPtr Reserved;
}
// Pulled from imaging.h in the Windows Mobile 5.0 Pocket PC SDK
public struct ImageInfo
{
public uint GuidPart1;  // I am being lazy here, I don't care at this point about the RawDataFormat GUID
public uint GuidPart2;  // I am being lazy here, I don't care at this point about the RawDataFormat GUID
public uint GuidPart3;  // I am being lazy here, I don't care at this point about the RawDataFormat GUID
public uint GuidPart4;  // I am being lazy here, I don't care at this point about the RawDataFormat GUID
public PixelFormatID pixelFormat;
public uint Width;
public uint Height;
public uint TileWidth;
public uint TileHeight;
public double Xdpi;
public double Ydpi;
public uint Flags;
}
// Pulled from imaging.h in the Windows Mobile 5.0 Pocket PC SDK
[ComImport, Guid("327ABDA7-072B-11D3-9D7B-0000F81EF32E"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
[ComVisible(true)]
public interface IImagingFactory
{
uint CreateImageFromStream();       // This is a place holder, note the lack of arguments
uint CreateImageFromFile(string filename, out INativeImage image);
// We need the MarshalAs attribute here to keep COM interop from sending the buffer down as a Safe Array.
uint CreateImageFromBuffer([MarshalAs(UnmanagedType.LPArray)] byte[] buffer, uint size, BufferDisposalFlag disposalFlag, out INativeImage image);
uint CreateNewBitmap(uint width, uint height, PixelFormatID pixelFormat, out IBitmapImage bitmap);
uint CreateBitmapFromImage(INativeImage image, uint width, uint height, PixelFormatID pixelFormat, InterpolationHint hints, out IBitmapImage bitmap);
uint CreateBitmapFromBuffer();      // This is a place holder, note the lack of arguments
uint CreateImageDecoder();          // This is a place holder, note the lack of arguments
uint CreateImageEncoderToStream();  // This is a place holder, note the lack of arguments
uint CreateImageEncoderToFile();    // This is a place holder, note the lack of arguments
uint GetInstalledDecoders();        // This is a place holder, note the lack of arguments
uint GetInstalledEncoders();        // This is a place holder, note the lack of arguments
uint InstallImageCodec();           // This is a place holder, note the lack of arguments
uint UninstallImageCodec();         // This is a place holder, note the lack of arguments
}
// Pulled from imaging.h in the Windows Mobile 5.0 Pocket PC SDK
[ComImport, Guid("327ABDA9-072B-11D3-9D7B-0000F81EF32E"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
[ComVisible(true)]
public interface INativeImage
{
uint GetPhysicalDimension(out Size size);
uint GetImageInfo(out ImageInfo info);
uint SetImageFlags(uint flags);
uint Draw(IntPtr hdc, ref Rectangle dstRect, IntPtr NULL); // "Correct" declaration: uint Draw(IntPtr hdc, ref Rectangle dstRect, ref Rectangle srcRect);
uint PushIntoSink();    // This is a place holder, note the lack of arguments
uint GetThumbnail(uint thumbWidth, uint thumbHeight, out INativeImage thumbImage);
}
// Pulled from imaging.h in the Windows Mobile 5.0 Pocket PC SDK
[ComImport, Guid("327ABDAA-072B-11D3-9D7B-0000F81EF32E"), InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
[ComVisible(true)]
public interface IBitmapImage
{
uint GetSize(out Size size);
uint GetPixelFormatID(out PixelFormatID pixelFormat);
uint LockBits(ref Rectangle rect, uint flags, PixelFormatID pixelFormat, out BitmapData lockedBitmapData);
uint UnlockBits(ref BitmapData lockedBitmapData);
uint GetPalette();  // This is a place holder, note the lack of arguments
uint SetPalette();  // This is a place holder, note the lack of arguments
}
}

调用方法如下

using (Graphics gxBuffer = Graphics.FromImage(backBuffer))
{
// Since we nop'd OnPaintBackground, take care of it here
gxBuffer.Clear(this.BackColor);
// Ask the Image object from Imaging to draw itself.
IntPtr hdcDest = gxBuffer.GetHdc();
Rectangle dstRect = new Rectangle(100, 100, 148, 148);
imagingResource.Draw(hdcDest, ref dstRect, IntPtr.Zero);
gxBuffer.ReleaseHdc(hdcDest);
// Ask the Image object from Imaging to draw itself.
/*IntPtr*/ hdcDest = gxBuffer.GetHdc(); // This is redundant, but keeps the necessary code together
/*Rectangle*/ dstRect = new Rectangle(50, 70, 50+132, 70+132);
imagingImage.Draw(hdcDest, ref dstRect, IntPtr.Zero);
gxBuffer.ReleaseHdc(hdcDest);
}
// Put the final composed image on screen.
e.Graphics.DrawImage(backBuffer, 0, 0);

文档可参考 http://msdn.microsoft.com/en-us/library/aa452202.aspx

另外一种方法还是采用Manged code, 对于预先知道透明色值的图像,比如地图API中的路径,背景色总为0xFFE0E0E0
可以使用下面方法

ImageAttributes _imageAttributes = new ImageAttributes();
Color color = Color.FromArgb(0xE0E0E0);
_imageAttributes.SetColorKey(color, color);
Rectangle dstRect =
 new Rectangle(x, y, netImage.GetWidth(), netImage.GetHeight());
gxBuffer.DrawImage(netImage._bitmap, dstRect, 0, 0,
                           netImage.GetWidth(),
netImage.GetHeight(),
GraphicsUnit.Pixel, _imageAttributes);

最终结果如下图

 

Silverlight 引路蜂二维图形库示例:结束语

尽管前面引路蜂二维图形库的例子是以Silverlight为例,但引路蜂二维图形库可以用于Java ME,BlackBerry, LWUIT, Windows Mobile ,Windows Phone, Android, iPhone, Java SE ,Mono 等各个平台,以Silverlight为例是因为Silverlight可以实现在线演示。

Install Microsoft Silverlight

Silverlight库及例子下载 http://www.guidebee.info/download/silverlight/SilverlightGraphics2DDemo.zip

 

Silverlight 引路蜂二维图形库示例:矢量字体

引路蜂二维图形库支持矢量字体,包括中文和英文。对于Silverlight应用,由于访问权限的问题,字库一般需作为资源文件包含在应用中,对于英文字体不是个大问题,而对于中文字库,GB2312字库文件最小也要4M以上,所以尽量是用同一字体。引路蜂二维图形库绘制文字时是采用的矢量字库。也可以对文字内部进行填充。文字方向可以从左到右,从上到下,从右到左。 

字体下载链接如下表:

字体 大小 下载
Arial 34K Download
Courier New 50K Download
Elephant 52K Download
Impact 34K Download
Georgia 53K Download
Rockwell 35K Download
Times New Roman 44K Download
Microsoft Sans Serif 29K Download
Verdana 36K Download
幼圆 5128K Download
新魏 15874K Download
新宋体 5740K Download
行楷 13588K Download
宋体 5740K Download
隶书 7083K Download
仿宋 8104K Download
黑体 6108K Download

 

下例使用行楷显示“引路蜂软件”。 

private void FontDemo()
{
 TextureBrush brush1; 

 BitmapImage img = new BitmapImage();
 img.CreateOptions = BitmapCreateOptions.None;
 string path = "/SilverlightGraphics2DDemo;component/brick.png";
 Stream s = Application.GetResourceStream
      (new Uri(path, UriKind.Relative)).Stream;
 img.SetSource(s);
 WriteableBitmap writeableBitmap = new WriteableBitmap(img);
 brush1 = new TextureBrush(writeableBitmap.Pixels,
      img.PixelWidth, img.PixelHeight);
 Pen pen = new Pen(Color.Blue, 1); 

 path = "/SilverlightGraphics2DDemo;component/xingkai.fon";
 int fontSize = 100;
 s = Application.GetResourceStream
     (new Uri(path, UriKind.Relative)).Stream;
 s.Seek(0, SeekOrigin.Begin);
 //Clear the canvas with white color.
 graphics2D.Clear(Color.White);
 char[] longLine = null; 

 FontEx font = new FontEx(s);
 string guidebee = "引路蜂软件";
 longLine = guidebee.ToCharArray();
 graphics2D.SetPenAndBrush(pen,brush1);
 graphics2D.DrawChars(font, fontSize, longLine, 0, longLine.Length,
  (screenWidth - fontSize) / 2, 20, FontEx.TextDirTb);
 int offset = 20;
 for (int i = 1; i < 4;i++ )
 {
  fontSize=100-i*20;
  offset += fontSize+5;
  graphics2D.DrawChars(font, fontSize, longLine, 0,
   longLine.Length, (screenWidth - fontSize) / 2 - offset,
        20, FontEx.TextDirTb);
  graphics2D.DrawChars(font, fontSize, longLine, 0,
   longLine.Length, (screenWidth - fontSize) / 2 + offset,
   20, FontEx.TextDirTb);
   
 }
}

 

除了外挂字体外,引路蜂二维图形库自带了一个英文字库可以通过FontEx.GetSystemFont()取得。此外上述.fon 字体格式为引路蜂自定义,内部使用SVG来描述字体。和Windows中的字体格式不一致。

 

Silverlight 引路蜂二维图形库示例:动画Beziers曲线

类Path为一条几何路径,可以通过直线,二次曲线,三次曲线来构成任意路径。Path提供了moveTo, lineTo, curveTo, curveToCubic, closePath方法来构成路径。

下面的例子动态显示一条Bezier曲线。

/**
* The animation thread.
*/
Thread _thread;
bool _drawn;
/**
 * The random number generator.
 */
readonly Random _random = new Random();
/**
 * The animated path
 */
readonly Path _path = new Path();
/**
 * Red brush used to fill the path.
 */
readonly SolidBrush _brush = new SolidBrush(Color.Red);
const int Numpts = 6;
readonly int[] _animpts = new int[Numpts * 2];
readonly int[] _deltas = new int[Numpts * 2];

private void Beziers()
{
 Reset(screenWidth, screenHeight);
 _thread = new Thread(RunBeziers);
 _thread.Start();
}

private void RunBeziers()
{

 Thread me = Thread.CurrentThread;

 if (!_drawn)
 {
  lock (this)
  {
   graphics2D.Clear(Color.White);
   graphics2D.Fill(_brush, _path);
   _drawn = true;
  }
 }
 while (_thread == me)
 {
  DrawDemo(screenWidth, screenHeight);
 }
}

/**
* Generates new points for the path.
*/
private void Animate(int[] pts, int[] deltas, int i, int limit)
{
 int newpt = pts[i] + deltas[i];
 if (newpt <= 0)
 {
  newpt = -newpt;
  deltas[i] = (_random.Next() & 0x00000003) + 2;
 }
 else if (newpt >= limit)
 {
  newpt = 2 * limit - newpt;
  deltas[i] = -((_random.Next() & 0x00000003) + 2);
 }
 pts[i] = newpt;
}

/**
* Resets the animation data.
*/
private void Reset(int w, int h)
{
 for (int i = 0; i < _animpts.Length; i += 2)
 {
  _animpts[i + 0] = (_random.Next() & 0x00000003) * w / 2;
  _animpts[i + 1] = (_random.Next() & 0x00000003) * h / 2;
  _deltas[i + 0] = (_random.Next() & 0x00000003) * 6 + 4;
  _deltas[i + 1] = (_random.Next() & 0x00000003) * 6 + 4;
  if (_animpts[i + 0] > w / 2)
  {
   _deltas[i + 0] = -_deltas[i + 0];
  }
  if (_animpts[i + 1] > h / 2)
  {
   _deltas[i + 1] = -_deltas[i + 1];
  }
 }
}

/**
 * Sets the points of the path and draws and fills the path.
 */
private void DrawDemo(int w, int h)
{
 for (int i = 0; i < _animpts.Length; i += 2)
 {
  Animate(_animpts, _deltas, i + 0, w);
  Animate(_animpts, _deltas, i + 1, h);
 }
 //Generates the new pata data.
 _path.Reset();
 int[] ctrlpts = _animpts;
 int len = ctrlpts.Length;
 int prevx = ctrlpts[len - 2];
 int prevy = ctrlpts[len - 1];
 int curx = ctrlpts[0];
 int cury = ctrlpts[1];
 int midx = (curx + prevx) / 2;
 int midy = (cury + prevy) / 2;
 _path.MoveTo(midx, midy);
 for (int i = 2; i <= ctrlpts.Length; i += 2)
 {
  int x1 = (curx + midx) / 2;
  int y1 = (cury + midy) / 2;
  prevx = curx;
  prevy = cury;
  if (i < ctrlpts.Length)
  {
   curx = ctrlpts[i + 0];
   cury = ctrlpts[i + 1];
  }
  else
  {
   curx = ctrlpts[0];
   cury = ctrlpts[1];
  }
  midx = (curx + prevx) / 2;
  midy = (cury + prevy) / 2;
  int x2 = (prevx + midx) / 2;
  int y2 = (prevy + midy) / 2;
  _path.CurveTo(x1, y1, x2, y2, midx, midy);
 }
 _path.ClosePath();
 // clear the clipRect area before production

 graphics2D.Clear(Color.White);
 graphics2D.Fill(_brush, _path);

 RefreshBitmap();

}

其中实时更新图像需要CompositionTarget.Rendering事件来处理。CompositionTarget.Rendering += CompositionTargetRendering;

private void CompositionTargetRendering(object sender, EventArgs e)
{
 bmp.Invalidate();
}

 

Silverlight 引路蜂二维图形库示例:显示位图

类Graphics2D同样提供了绘制位图的方法,drawImage(). 下面的例子显示卫星地图。卫星地图有卫星照片和道路名称组合而成,所选的原始图像,可以参见

http://www.mapdigit.com/guidebeemap/maptile.php?type=MICROSOFTSATELLITE&x=7&y=4&z=14    maptile_7_4.jpg
http://www.mapdigit.com/guidebeemap/maptile.php?type=MICROSOFTSATELLITE&x=6&y=4&z=14  maptile_6_4.jpg
http://www.mapdigit.com/guidebeemap/maptile.php?type=GOOGLEHYBRID&x=7&y=4&z=14  maptile_7_4.png
http://www.mapdigit.com/guidebeemap/maptile.php?type=GOOGLEHYBRID&x=6&y=4&z=14  maptile_6_4.png
private void DrawMap()
{
 BitmapImage img = new BitmapImage();
 img.CreateOptions = BitmapCreateOptions.None;
 string path = "/SilverlightGraphics2DDemo;component/map/maptile_6_4.jpg";
 Stream s = Application.GetResourceStream(new Uri(path, UriKind.Relative)).Stream;
 img.SetSource(s);
 WriteableBitmap writeableBitmap = new WriteableBitmap(img);
 graphics2D.Clear(Color.White);
 graphics2D.DrawImage(writeableBitmap.Pixels, 256, 256, 0, 0);

 path = "/SilverlightGraphics2DDemo;component/map/maptile_7_4.jpg";
 s = Application.GetResourceStream(new Uri(path, UriKind.Relative)).Stream;
 img.SetSource(s);
 writeableBitmap = new WriteableBitmap(img);
 graphics2D.DrawImage(writeableBitmap.Pixels, 256, 256,256,0);

 path = "/SilverlightGraphics2DDemo;component/map/maptile_6_4.png";
 s = Application.GetResourceStream(new Uri(path, UriKind.Relative)).Stream;
 img.SetSource(s);
 writeableBitmap = new WriteableBitmap(img);
 graphics2D.DrawImage(writeableBitmap.Pixels, 256, 256, 0, 0);

 path = "/SilverlightGraphics2DDemo;component/map/maptile_7_4.png";
 s = Application.GetResourceStream(new Uri(path, UriKind.Relative)).Stream;
 img.SetSource(s);
 writeableBitmap = new WriteableBitmap(img);
 graphics2D.DrawImage(writeableBitmap.Pixels, 256, 256, 256, 0);
}