在Win8Metro(C#)中,如何进行简单的绘图操作?
在Win8中Windows.UI.Xaml.Shapes namespace命名空间包含了以下内容,如图Fig.1所示,我们可以用它进行简单的绘图操作。
我们以Line的绘制为例详解:
1,在绘制Line之前,我们要先在Metro界面上添加一个XAML Controls控件Canvas,用它来显示并绘制我们的Line对象。
2,我们调用类Line,构建所要绘制的线条,每一个Line对象都包含以下几个重要属性:
线条的起点终点属性(X1,Y1,X2,Y2);
指定画笔属性Stroke;
线条宽度StrokeThickness属性;
我们定义四个Line对象,并以此来绘制一个矩形框(为了了解Line,这里没有做任何简化算法),代码如下:
Windows.UI.Xaml.Shapes.Line a = newLine();//定义线条a
a.X1 = 10; //设置a的起点与终点
a.X2 = 10;
a.Y1 = 10;
a.Y2 = 200;
a.Stroke = newSolidColorBrush(Windows.UI.Colors.Red);//设定画笔
a.StrokeEndLineCap = PenLineCap.Round;//设定线条端点模式
a.StrokeThickness = 2;//设置线宽
CanvasS.Children.Add(a);//绘制线条a
Line b = newLine();
b.X1 = 10;
b.X2 = 100;
b.Y1 = 10;
b.Y2 = 10;
b.Stroke = newSolidColorBrush(Windows.UI.Colors.Blue);
b.StrokeEndLineCap = PenLineCap.Round;
b.StrokeThickness = 2;
CanvasS.Children.Add(b);
Line c = newLine();
c.X1 = 100;
c.X2 = 10;
c.Y1 = 200;
c.Y2 = 200;
c.Stroke = newSolidColorBrush(Windows.UI.Colors.Yellow);
c.StrokeEndLineCap = PenLineCap.Round;
c.StrokeThickness = 2;
CanvasS.Children.Add(c);
Line d = newLine();
d.X1 = 100;
d.X2 = 100;
d.Y1 = 10;
d.Y2 = 200;
d.Stroke = newSolidColorBrush(Windows.UI.Colors.Green);
d.StrokeEndLineCap = PenLineCap.Round;
d.StrokeThickness = 2;
CanvasS.Children.Add(d);
[绘制效果]
Fig.2矩形图
接下来我们依次介绍Windows.UI.Xaml.Shapes namespace中的其他绘图类的使用。
[Ellipse]
代码如下:
Ellipse myEllipse = newEllipse();
myEllipse.Height = 100;
myEllipse.Width = 200;
myEllipse.Stroke = newSolidColorBrush(Windows.UI.Colors.Red);
myEllipse.StrokeThickness = 2;
CanvasS.Children.Add(myEllipse);
[绘制效果]
[Path]
Path的声明比较特殊,它的Data对象为EllipseGeometry对象,代码如下:
EllipseGeometry myEllipseGeometry = newEllipseGeometry();
myEllipseGeometry.Center = newPoint(50, 50);//椭圆中心坐标
myEllipseGeometry.RadiusX = 100;
myEllipseGeometry.RadiusY = 50;
Windows.UI.Xaml.Shapes.Path myPath = new Windows.UI.Xaml.Shapes.Path();
myPath.Stroke = newSolidColorBrush(Windows.UI.Colors. Yellow);
myPath.Fill = newSolidColorBrush(Windows.UI.Colors.Red);//填充效果
myPath.StrokeThickness = 2;
myPath.Data = myEllipseGeometry;
CanvasS.Children.Add(myPath);
[绘制效果]
注:这个椭圆的中心坐标可以设置,这里设置为(50,50),因此出现图上效果。
我们把Ellipse和这个叠加起来,将myEllipseGeometry用黄色表示:
[Rectangle]
代码如下:
Rectangle myRectangle = newRectangle();
myRectangle.Width = 100;
myRectangle.Height = 200;
myRectangle.Stroke = newSolidColorBrush(Windows.UI.Colors.Red);
myRectangle.StrokeThickness = 3;
CanvasS.Children.Add(myRectangle);
[绘制效果]
[Polygon]
代码如下:
Polygon myPolygon = newPolygon();
myPolygon.Points.Add(newPoint(300, 200));//添加点集
myPolygon.Points.Add(newPoint(400, 125));
myPolygon.Points.Add(newPoint(400, 175));
myPolygon.Stroke = newSolidColorBrush(Windows.UI.Colors.Red);
//myPolygon.Opacity = 0.4;//透明度调整
CanvasS.Children.Add(myPolygon);
[绘制效果]
[Polyline]
代码如下:
Polyline myPolyline = newPolyline();
myPolyline.Points.Add(newPoint(50, 25));
myPolyline.Points.Add(newPoint(0, 100));
myPolyline.Points.Add(newPoint(100, 100));
myPolyline.Points.Add(newPoint(50, 25));
myPolyline.Stroke = newSolidColorBrush(Windows.UI.Colors.Red);
myPolyline.StrokeThickness = 3;
CanvasS.Children.Add(myPolyline);
[绘制效果]