入门3--了解silverlight 1.0 XAML提供的图形元素

以下介绍Polygon, Polyline,Path．

原理上来讲，Polygon可以自动将第一个起始点与最后一个起始点自动连接起来．故Polygon元素对象是一个拥有任意边界的封闭图形，也就是多边形．

而Polyline可以则不会自动将第一个起始点与最后一个起始点自动连接起来．故Polyline元素对象是一串线段的连接，所构成的形状是非封闭的．

代码１：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Polyline Canvas.Left="20" Canvas.Top="10"
      Points="50,0 100,50 150,0 200,50 100,50" Stroke="Black" StrokeThickness="5" />

  <Polyline Points="170, 150 170, 250 270, 250 270, 150"
    Stroke="Black" StrokeThickness="5"/>

  <Polyline Points="0,150 50,200 100,150 150,200 50,200" Stroke="Black" StrokeThickness="5"
      Fill="Red" /> 
 
  <Polygon Points="10,10 10,55 55,55 55,10"
      Stroke="Black" StrokeThickness="5" Fill="LightBlue"/>
 
</Canvas>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

将代码１粘贴到入门１中myxaml.xaml文件中，后双击入门１中SampleHTMLPage.html文件，就可看到四个图形，其中左上角的正方形是由Polygon元素绘制渲染的，其他三个连接线段则由Polyline元素绘制渲染．

这里Stroke，Fill，StrokeThickness的属性与Rectangle,Ellipse元素对象的类似，分别表示，边框色，内部填充色，和边框宽度．

Points元素对象从代码１中可以看出，是一连串的(X1,Y1),(X2,Y2),......等坐标值，注意：这里每组坐标必须以空格分开

为了使朋友们能看清楚Polygon, Polyline之间的区别，这里再给出一段代码

代码２：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Polygon Canvas.Left="20" Canvas.Top="10"
      Points="0,30 40,0 80,30 65,80 15,80" Stroke="Black" StrokeThickness="5" Fill="GreenYellow"/>

  <Polyline Canvas.Left="20" Canvas.Top="120"
      Points="0,30 40,0 80,30 65,80 15,80" Stroke="Black" StrokeThickness="5" Fill="GreenYellow"/>
 
</Canvas>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

将代码２粘贴到入门１中myxaml.xaml文件中，后双击入门１中SampleHTMLPage.html文件，就可看到．

上面的是个封闭的正五边形，下面的是不封闭的四边形．

Polyline也可以造成封闭的效果，只需要将最后一个点接回起始点即可，修改代码２后，我们就可看到，

代码３（修改代码２）：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Polygon Canvas.Left="20" Canvas.Top="10"
      Points="0,30 40,0 80,30 65,80 15,80" Stroke="Black" StrokeThickness="5" Fill="GreenYellow"/>

  <Polyline Canvas.Left="20" Canvas.Top="120"
      Points="0,30 40,0 80,30 65,80 15,80 0,30" Stroke="Black" StrokeThickness="5" Fill="GreenYellow"/>
 
</Canvas>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

看到了吧，不过手工封闭的Polyline，其线条并没有完美的接合在一起．

 

下面接着介绍Path元素对象：

这里与以前介绍的图形元素的Stroke，Fill，StrokeThickness属性表示是一样的．Path元素对象语法最为复杂，可以一次包含多个矩形，直线圆形和曲线等几何图形，不容易理解．

先看看Path元素对象重要属性：Stroke，Fill，StrokeThickness,Data．这里与以前介绍的图形元素的Stroke，Fill，StrokeThickness属性表示是一样的．

Data是什么属性？当要使用Path元素对象时，必须用Data属性值对Path绘制渲染，也就是说，如果没有设置Path属性值，或者设置为空，则我们什么也看不到，这里必须使用一种特殊类型的语法来设置其Data属性，先看一个例子：

代码４：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
  <Path Data="M0,0 L11.5,0 11.5,30 5.75,40 0,30z"
      Stroke="Black" Fill="SlateBlue"
      Canvas.Left="10" Canvas.Top="10" />

  <Path Data="M 10,100 C 10,300 300,-200 250,100z"
      Stroke="Red" Fill="Orange"
      Canvas.Left="10" Canvas.Top="10" />

  <Path Data="M 0,200 L100,200 50,50z"
      Stroke="Black" Fill="Lime"
      Canvas.Left="150" Canvas.Top="70" />

</Canvas>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

将代码４粘贴到入门１中myxaml.xaml文件中，后双击入门１中SampleHTMLPage.html文件，就可看到三个Path图形，这里我摘出Data属性值进行剖析，对Data="M 0,200 L100,200 50,50z来说，就是以(0,200)坐标为起点，以直线方式连接(100,200) ，再以(100,200)点为起点，以直线连接(50,50)，最后再以(50,50)为起点,以直线方式连接(0,200)，最后，绘制成一个三角形，这里因为Canvas.Left="150" Canvas.Top="70"的缘故，所以，实际的绘制是以"M 150,270 L250,270 200,120z"绘制的．这里"z"表示的意思就是终结点连接起始点．
 

                                                                                                                 　　　  锐意进取　大胆创新
                                                                                 　　　　　　　　　　　　　 蒙哥马利 朱