WPF系列:画图

Line

　　在两个坐标点之间画一条直线,通过四个属性设置它的起始和结束

 <Line Stroke="Blue" StrokeThickness="3" X1="20" Y1="20" X2="300" Y2="20"></Line>

　　如果线条是画在Canvas画布中，那么Canvas的附加属性Top和Left对它是有效的

  <Line Name="a" Stroke="Orange" X1="20" Y1="20" X2="120" Y2="100"></Line>
  <Line Name="b" Stroke="Orange" X1="20" Y1="20" X2="120" Y2="100"
Canvas.Left="15" Canvas.Top="50"></Line>

Polyline

　　折线和直线类似，只不过是把多个直线连接在一块，它把所有转折点的坐标都放在了Points属性中，然后坐标点之间用空格分离，X轴与Y轴之间也可以用空格，为了可读性所以最好使用","符号；你也可以把两头接起来，形成一个图形

  <Polyline Stroke="Green" StrokeThickness="3"   Points="5,100 15,100 35,200 55,55 70,200 80,160 90,200 105,150 115,200 125,100 140,200 155,155 180,155"></Polyline>

<Polyline Stroke="Green" StrokeThickness="3" Fill="Yellow" Points="5,100 15,100 35,200 55,55 70,200 80,160 90,200 105,150 115,200 125,100 140,200 155,155 180,155 5,100"></Polyline>

Polygon

　　Polygon可以用来绘制多边形，和Polyline类似，但是他能自动把最后一个点和起始点连接起来而不需要像Polyline那样在Points属性最后再加上起始点

 <Polygon Stroke="Green" StrokeThickness="3" Fill="Yellow" Points="5,100 15,100 35,200 55,55 70,200 80,160 90,200 105,150 115,200 125,100 140,200 155,155 180,155"></Polygon>

Rectangle

　　绘制矩形，通过Width和Height属性就能指定矩形的宽高

<Rectangle Canvas.Left="50" Canvas.Top="30" Width="200" Height="100" Fill="Aqua"></Rectangle>

Ellipse

　　Ellipse用于绘制圆形和椭圆，也是通过Width和Height属性改变圆的形状

 <Ellipse Fill="Beige" Width="100" Height="100"></Ellipse>
 <Ellipse Canvas.Left="130" Fill="BlueViolet" Width="200" Height="100"></Ellipse>

Path

　　绘制一系列的曲线和直线，例如通过它画一条曲线；在Data属性中M定义了线条的起点(20,20)，Q指定了二次贝塞尔曲线控制点(100,100)和终点(200,20)

 <Path Stroke="BurlyWood" StrokeThickness="5" Data="M 20 20 Q 100,100 200,20"></Path>

　　在Data中的特殊字符常见的有以下这几种，

　　M表示起点

　　Z闭合图形

　　L到指定点的线条

　　H水平线，V垂直线

　　Q二次贝塞尔曲线，T光滑的二次贝塞尔曲线

　　C三次贝塞尔曲线，S光滑的三次贝塞尔曲线

　　A椭圆弧

   <Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="110" Canvas.Left="230" >
       <Path.Data>
           <GeometryGroup>
               <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
               <EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"></EllipseGeometry>
           </GeometryGroup>
       </Path.Data>
   </Path>
   <Path Canvas.Left="10" Canvas.Top="20" Fill="Yellow" Stroke="Blue" StrokeThickness="2.5" Data="M120,5 L128,80 L220,50 L160,130 C200,280 100,50 70,260 L60,140 L0,110 L70,80 Z" StrokeLineJoin="Round"></Path>