Facebook Twitter LinkedIn E-mail
magnify
Home Posts tagged "Silverlight"

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 引路蜂二维图形库示例:结束语
 

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

 

Silverlight 引路蜂二维图形库示例:材质画刷

除了单色,渐变画刷外,也可以使用图像作为模式(Pattern)画刷来填充图形。

下面的例子使用两个PNG图像来填充图形。

private void Patterns()
{
	TextureBrush brush1;
	TextureBrush brush2;
	TextureBrush brush3;

	AffineTransform matrix1 = new AffineTransform();
	AffineTransform matrix2 = new AffineTransform();

	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);
	path = "/SilverlightGraphics2DDemo;component/bird.png";
	s = Application.GetResourceStream(new Uri(path, UriKind.Relative)).Stream;
	img.SetSource(s);
	writeableBitmap = new WriteableBitmap(img);
	brush2 = new TextureBrush(writeableBitmap.Pixels, img.PixelWidth, 
	     img.PixelHeight);
	brush3 = new TextureBrush(writeableBitmap.Pixels, img.PixelWidth, 
	     img.PixelHeight,127);
	matrix2.Translate(50, 50);
	graphics2D.Clear(Color.White);
	graphics2D.AffineTransform = (matrix1);
	graphics2D.FillRectangle(brush1, new Rectangle(20, 50, 100, 100));
	graphics2D.FillOval(brush2, 10, 10, 80, 80);
	graphics2D.AffineTransform = (matrix2);
	graphics2D.FillOval(brush3, 10, 10, 80, 80);

}

这个例子所用的brick.png 和bird.png ,brush3是半透明画刷。