Facebook Twitter LinkedIn E-mail
magnify
Home 2011 二月

Silverlight 引路蜂二维图形库示例:不同线宽

在Window Mobile 和Java ME中画线只支持线宽为1,引路蜂二维图形库允许指定Pen的宽度。

下例显示了多条不同宽度的线段。

private void Lines()
{
 Color greenColor = new Color(0x00ff00,false);
 //Clear the canvas with white color.
 graphics2D.Clear(Color.White);

 Pen pen = new Pen(greenColor, 1);
 graphics2D.DrawLine(pen, 20, 150, 60, 50);

 pen = new Pen(greenColor, 2);
 graphics2D.DrawLine(pen, 40, 150, 80, 50);

 pen = new Pen(greenColor, 3);
 graphics2D.DrawLine(pen, 60, 150, 100, 50);

 pen = new Pen(greenColor, 5);
 graphics2D.DrawLine(pen, 80, 150, 120, 50);

 pen = new Pen(greenColor, 7);
 graphics2D.DrawLine(pen, 100, 150, 140, 50);

 pen = new Pen(greenColor, 10);
 graphics2D.DrawLine(pen, 120, 150, 160, 50);
}

 

Silverlight 引路蜂二维图形库示例:线段连接类型(LineJoin)

线段连接类型(LineJoin)指定了线段了连接的方式,有三种不同的连接类型JOIN_MITER, JOIN_ROUND和OIN_BEVEL。

下面类型显示了三种不同的LineJoin类型。

private void LineJoin()
{
 Color blackColor = new Color(0x000000);
 Color whiteColor = new Color(0xffffff);
 Path path = new Path();
 path.MoveTo(40, 80);
 path.LineTo(90, 40);
 path.LineTo(140, 80);
 graphics2D.Reset();
 graphics2D.Clear(Color.White);

 AffineTransform matrix = new AffineTransform();
 graphics2D.AffineTransform = matrix;
 Pen pen = new Pen(blackColor, 20, Pen.CapButt, Pen.JoinMiter);
 graphics2D.Draw(pen, path);
 pen = new Pen(whiteColor, 1);
 graphics2D.Draw(pen, path);
 matrix.Translate(0, 50);
 graphics2D.AffineTransform = matrix;

 pen = new Pen(blackColor, 20, Pen.CapButt, Pen.JoinRound);
 graphics2D.Draw(pen, path);
 pen = new Pen(whiteColor, 1);
 graphics2D.Draw(pen, path);

 matrix = new AffineTransform();
 matrix.Translate(0, 100);
 graphics2D.AffineTransform = matrix;

 pen = new Pen(blackColor, 20, Pen.CapButt, Pen.JoinBevel);
 graphics2D.Draw(pen, path);
 pen = new Pen(whiteColor, 1);
 graphics2D.Draw(pen, path);
}

 

Silverlight 引路蜂二维图形库示例:线段末端形状(LineCap)

LineCap 指定了开放路径端点的形状。有三种不同的类型:CAP_BUTT, CAP_ROUND和CAP_SQUARE。

下面代码显示了三种不同的LineCap类型。

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

 

Silverlight 引路蜂二维图形库示例:虚线类型

直线的虚线摸板(DashArray)指出了虚线的模式和间隔。下面的例子使用了不同的Dash Pattern来显示同一条线段。

private void Dashes()
{
 Color blackColor = new Color(0x000000);
 int[] dashArray1 = { 2, 2 };
 int[] dashArray2 = { 6, 6 };
 int[] dashArray3 = { 4, 1, 2, 1, 1, 6 };
 graphics2D.Reset();
 graphics2D.Clear(Color.White);

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

 pen = new Pen(blackColor, 20, Pen.CapButt, Pen.JoinMiter, dashArray2, 0);
 graphics2D.DrawLine(pen, 40, 100, 140, 100);

 pen = new Pen(blackColor, 20, Pen.CapButt, Pen.JoinMiter, dashArray3, 0);
 graphics2D.DrawLine(pen, 40, 140, 140, 140);
}

 

Silverlight 引路蜂二维图形库示例:颜色

引路蜂二维图形库中的颜色值是个32位整数,采用0xAARRGGBB格式。Alpha通道指定了颜色的透明度,0x00表示全透明,0xFF表示完全不透明。

下面的代码显示了如何创建不透明和半透明的颜色。

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

 

Silverlight 引路蜂二维图形库示例:绘制各种几何图形

这个例子说明如何使用Graphics2D对象来绘制各种几何图形。引路蜂二维图形库中定义里多种基本几何图形,如,点,线段,曲线和矩形等。接口PathIterator定义了从Path中获取路径元素的方法。接口IShape定义了描述几何图形公用的方法。

类Point定义了二维空间位置在(x,y)一个点。Point point = new Point (x, y); 创建一个点对象。此外Point类也提供了计算两点之间距离的方法等。

线段

类Line定义了平面上一条线段。下面代码绘制一条线段。

// draw Line2D.Double
graphics2D.draw (pen, new Line(x1, y1, x2, y2));

图形库中类Pen可以用来定义绘制线段的线型,线宽等参数。

二次曲线

类QuadCurve实现了IShape接口,它定义了平面上一条二次曲线。二次曲线可以通过曲线的两个端点和一个控制点来定义。

// create new QuadCurve
QuadCurve q = new QuadCurve();
// draw QuadCurve2D with set coordinates
graphics2D.draw(pen,q.setCurve(x1, y1, ctrlx, ctrly, x2,y2));

三次曲线

类CubicCurve同样实现了IShape接口,它定义了平面上一条三次曲线。和二次曲线类似,三次曲线可以通过曲线的两个端点和两个控制点来定义。

// create new CubicCurve
CubicCurve c = new CubicCurve();
// draw CubicCurve with set coordinates
graphics2D.draw(pen, c.setCurve(x1, y1, ctrlx1,ctrly1, ctrlx2, ctrly2, x2, y2));

矩形

类Rectangle是RectangleShape的子类。RectangleShape同样实现了IShape接口。 Rectangle可以通过一个点(x,y)和大小(Dimsension)来定义。

// draw Rectangle
graphics2D.draw(pen,new Rectangle(x, y,rectwidth,rectheight));

类RoundRectangle定义了带圆角的矩形。圆角矩形可以由下列参数来定义:位置,宽度,长度,圆角宽度,圆角长度。

// draw RoundRectangle
graphics2D.draw(pen,new RoundRectangle(x, y,rectwidth,rectheight,10, 10));

椭圆

类Ellipse通过椭圆的外接矩形来定义其大小。

// draw Ellipse
graphics2D.draw(pen, new Ellipse(x, y,rectwidth,rectheight));

圆弧

类Arc通过外接矩形,起始角度,角度,封闭类型来定义。

// draw Arc
graphics2D.draw(pen,new Arc(x, y,rectwidth,rectheight,90, 135,Arc.OPEN));

下面代码显示了多种几何图形。

private void SharpsDemo2D()
{
 Color bg = Color.White;
 Color fg = Color.Black;
 Color red = Color.Red;
 Color white = Color.White;
 Pen pen = new Pen(fg, 1);
 SolidBrush brush = new SolidBrush(red);
 //Clear the canvas with white color.
 graphics2D.Clear(bg);
 Dimension d = new Dimension(screenWidth, screenHeight);
 int gridWidth = d.Width / 2;
 int gridHeight = d.Height / 6;

 int x = 5;
 int y = 7;
 int rectWidth = gridWidth - 2 * x;
 int stringY = gridHeight - 3 - 2 - 16;
 int rectHeight = stringY - y - 2;
 graphics2D.Draw(pen, new Line(x, y + rectHeight - 1,
  x + rectWidth, y));
 x += gridWidth;
 graphics2D.Draw(pen, new Rectangle(x, y, rectWidth,
  rectHeight));
 x += gridWidth;
 x = 5;
 y += gridHeight;
 stringY += gridHeight;
 graphics2D.Draw(pen, new RoundRectangle(x, y, rectWidth,
   rectHeight, 10, 10));
 x += gridWidth;
 graphics2D.Draw(pen, new Arc(x, y, rectWidth, rectHeight, 90,
   135, Arc.Open));
 x = 5;
 y += gridHeight;
 stringY += gridHeight;
 graphics2D.Draw(pen, new Ellipse(x, y, rectWidth, rectHeight));
 x += gridWidth;
 // draw GeneralPath (polygon)
 int[] x1Points = { x, x + rectWidth, x, x + rectWidth };
 int[] y1Points = { y, y + rectHeight, y + rectHeight, y };
 Path polygon = new Path(Path.WindEvenOdd,
   x1Points.Length);
 polygon.MoveTo(x1Points[0], y1Points[0]);
 for (int index = 1; index < x1Points.Length; index++)
 {
  polygon.LineTo(x1Points[index], y1Points[index]);
 }
 polygon.ClosePath();
 graphics2D.Draw(pen, polygon);
 x = 5;
 y += gridHeight;
 stringY += gridHeight;
 int[] x2Points = { x, x + rectWidth, x, x + rectWidth };
 int[] y2Points = { y, y + rectHeight, y + rectHeight, y };
 Path polyline = new Path(Path.WindEvenOdd,
   x2Points.Length);
 polyline.MoveTo(x2Points[0], y2Points[0]);
 for (int index = 1; index < x2Points.Length; index++)
 {
  polyline.LineTo(x2Points[index], y2Points[index]);
 }
 graphics2D.Draw(pen, polyline);
 x += gridWidth;
 graphics2D.SetPenAndBrush(pen, brush);
 graphics2D.Fill(null,
  new Rectangle(x, y, rectWidth, rectHeight));
 graphics2D.Draw(null,
  new Rectangle(x, y, rectWidth, rectHeight));
 x = 5;
 y += gridHeight;
 stringY += gridHeight;
 Color[] colors = new Color[] { red, white };
 int[] fractions = new int[] { 0, 255 };
 LinearGradientBrush redtowhite =
   new LinearGradientBrush(x, y, x + rectWidth, y,
   fractions, colors, Brush.NoCycle);
 graphics2D.SetPenAndBrush(pen, redtowhite);
 graphics2D.Fill(null, new RoundRectangle(x, y,
  rectWidth,rectHeight, 10, 10));
 graphics2D.Draw(null, new RoundRectangle(x, y,
  rectWidth,rectHeight, 10, 10));
 x += gridWidth;
 graphics2D.SetPenAndBrush(pen, brush);
 graphics2D.Fill(null, new Arc(x, y, rectWidth,
  rectHeight, 90,135, Arc.Chord));
 graphics2D.Draw(null, new Arc(x, y, rectWidth,
  rectHeight, 90,135, Arc.Chord));
 x = 5;
 y += gridHeight;
 stringY += gridHeight;
 int[] x3Points = { x, x + rectWidth, x, x + rectWidth };
 int[] y3Points = { y, y + rectHeight, y + rectHeight, y };
 Path filledPolygon = new Path(Path.WindEvenOdd,
   x3Points.Length);
 filledPolygon.MoveTo(x3Points[0], y3Points[0]);
 for (int index = 1; index < x3Points.Length; index++)
 {
  filledPolygon.LineTo(x3Points[index], y3Points[index]);
 }
 filledPolygon.ClosePath();
 graphics2D.SetPenAndBrush(pen, brush);
 graphics2D.Fill(null, filledPolygon);
 graphics2D.Draw(null, filledPolygon);

}