Win8简单几何图形的绘制

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

[绘制效果]

                                   

以上只是一些简单应用，希望大家努力探索！！！