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

概述以下介绍Polygon, Polyline,Path． 原理上来讲，Polygon可以自动将第一个起始点与最后一个起始点自动连接起来．故Polygon元素对象是一个拥有任意边界的封闭图形，也就是多边形． 而Polyline可以则不会自动将第一个起始点与最后一个起始点自动连接起来．故Polyline元素对象是一串线段的连接，所构成的形状是非封闭的． 代码１： ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

以下介绍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,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,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,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,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,50z"
      stroke="Black" Fill="lime"
      Canvas.left="150" Canvas.top="70" />

</Canvas>

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

将代码４粘贴到入门１中myxaml.xaml文件中，后双击入门１中SampleHTMLPage.HTML文件，就可看到三个Path图形，这里我摘出Data属性值进行剖析，对Data="M 0,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"表示的意思就是终结点连接起始点．
 

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

  总结

以上是内存溢出为你收集整理的入门3--了解silverlight 1.0 XAML提供的图形元素全部内容，希望文章能够帮你解决入门3--了解silverlight 1.0 XAML提供的图形元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。