一、WPF的基本图形
一>形状绘图
- Line：直线段，可以设置笔触（Stroke）。直线是最简单的图形。使用X1、Y1两个属性设置起点坐标，X2、Y2两个属性设置终点坐标。控制起点/终点坐标可以实现平行、交错等效果。Stroke（笔触）属性的数据类型是Brush（画刷）。
看下面一个例子：
<!--StrokeThickness：图形轮廓的粗细度；StrokeDashArray：形状轮廓的虚线间隙的样式；StrokeStartLineCap/StrokeEndLineCap：直线始端/末端的图形样式，属性值有Flat、Round、Square、Triangle-->
<Line X1="10" Y1="20" X2="280" Y2="20" Stroke="Pink" StrokeThickness="10"/>
<Line X1="10" Y1="50" X2="280" Y2="50" Stroke="Black" StrokeDashArray="3" StrokeThickness="1"/>
<Line X1="10" Y1="80" X2="280" Y2="80" Stroke="Pink" StrokeEndLineCap="Flat" StrokeThickness="10"/>
<Line X1="10" Y1="110" X2="280" Y2="110" Stroke="Pink" StrokeEndLineCap="Round" StrokeThickness="10"/>
<Line X1="10" Y1="140" X2="280" Y2="140" Stroke="Pink" StrokeEndLineCap="Square" StrokeThickness="10"/>
<Line X1="10" Y1="170" X2="280" Y2="170" Stroke="Pink" StrokeEndLineCap="Triangle" StrokeThickness="10"/>
效果如下：
- Rectangle：矩形，由笔触（Stroke）和填充（Fill）构成。
看下面一个例子：
<Rectangle Width="100" Height="100" Fill="Pink" Stroke="Red" StrokeThickness="2"/>
效果如下：
看下面一个例子，将矩形绘制成圆角的矩形
<Rectangle Width="100" Height="100" Fill="Pink" Stroke="Red" StrokeThickness="2" RadiusX="30" RadiusY="20"/>
效果如下：
- Ellipse椭圆，由笔触（Stroke）和填充（Fill）构成。Width和Height相等的椭圆便是正圆。
看下面一个例子：
<Ellipse Width="120" Height="80" Fill="Pink" Stroke="Red" StrokeThickness="2" />
效果如下：
- Polygon多边形，
看下面一个例子：
<Polygon Points="100,150 400,150 140,320 250,50 360,320" StrokeThickness="2" Stroke="Pink"/>
效果图如下：
- Polyline多线型，由多条首尾相接的直线组成。
看下面一个例子：
<Polyline Points="50,200 100,80 200,80 150,120" StrokeThickness="2" Stroke="Pink"/>
效果图如下：
- Path路径，可以将直线、弧形、曲线等基本元素结合起来，形成更复杂的图形，Path最重要的属性：Data
看下面一个例子：
<!-- M：移动到起始点 C：三次方贝塞尔曲线-->
<Path Stroke="Red" StrokeThickness="2" Data="M 240,240 C 160,80 320,80 240,240"/>
效果图如下：
二>几何绘图
图形绘图与几何绘图的区别：
- 图形对象可以独立存在，可以独立绘制出具体需要的图形，
- 几何图形对象没有具体的形体，他需要依赖于某一对象元素而存在，不能直接呈现在画板上
几何绘图包含5种对象：
- LineGeometry：直线几何图形
- RectangleGeometry：矩形几何图形
- EllipseGeometry：椭圆几何图形
- PathGeometry：路径几何图形
- GeometryGroup：由多个基本几何图形组合在一起，形成的几何图形组
看下面一个例子：
<Grid Height="469" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="239*"/>
<ColumnDefinition Width="253*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100*"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="169*"/>
</Grid.RowDefinitions>
<!--直线-->
<Path Stroke="Blue" StrokeThickness="2" Grid.Column="0" Grid.Row="0">
<Path.Data>
<LineGeometry StartPoint="20,40" EndPoint="200,60"/>
</Path.Data>
</Path>
<!--矩形路径-->
<Path Stroke="Pink" StrokeThickness="2" Grid.Column="1" Grid.Row="0">
<Path.Data>
<!--Rect="40,20,60,60" 40,20为坐标起点，第三位数为宽度，第四位数为长度-->
<RectangleGeometry Rect="40,20,60,60" RadiusX="10" RadiusY="10"/>
</Path.Data>
</Path>
<!--椭圆路径-->
<Path Stroke="Yellow" Fill="Orange" Grid.Column="0" Grid.Row="1">
<Path.Data>
<EllipseGeometry Center="100,50" RadiusX="60" RadiusY="40"></EllipseGeometry>
</Path.Data>
</Path>
<!—几何图形组-->
<Path Fill="Pink" Stroke="Red" StrokeThickness="2">
<Path.Data>
<GeometryGroup FillRule="EvenOdd">
<EllipseGeometry Center="80,80" RadiusX="30" RadiusY="60"/>
<LineGeometry StartPoint="20,40" EndPoint="200,60"/>
<RectangleGeometry Rect="20,20,60,60" RadiusX="10" RadiusY="10"/>
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
效果图如下：
