之前的总结
01 WPF基础分享之布局
02 WPF基础之路由事件
03 WPF基础之内容控件
04 WPF基础之元素绑定
05 WPF基础之命令
06 WPF基础之资源
07 WPF基础之样式
08 WPF基础之形状画刷和变换
路径和几何图形
Shape类还有一个类没介绍，就path类，path类能够包含任何简单形状、多组形状以及更复杂的要素，如曲线。Path类提供了Data属性，改属性接收一个Geometry对象，该对象定义路径包含一个或多个图形。
不能直接的创建Geometry对象，因为Geometry是抽象类，它子类的包含如下：
名称
说明LineGeometry代表直线，该几何图形相当于Line形状。RectangleGeometry代表矩形(可以具有圆形拐角)，该几何图形相当于Rectangle形状。EllipseGeometry代表椭圆，该图形相当于Ellipse形状。GeometryGroup为单个路径添加任意多个Geometry对象，使用EvenOdd或NonZero填充规则来确定要填充的区域。CombinedGeometry将两个几何图形合并为一个形状。可使用CombineMode属性选择如何组合两个几何图形。PathGeometry代表更复杂的弧线、曲线以及直线构成的图形，并且既可以是闭合的，也可以是不闭合的。StreamGeometry相当于PathGeometry的只读轻量级。StreamGeometry图形可节省内存，因为它不在内存中同时保存路径的所有分段。并且这类图形一旦被创建就不能再修改。
直线、矩形和椭圆图形
LineGeometry、RectangleGeometry以及EllipseGeometry类直接对应于Line、Rectangle以及Ellipse形状。
<Rectangle Width="100" Height="50" Fill="Yellow" Stroke="Blue"></Rectangle>
<Path Fill="Yellow" Stroke="Blue">
<Path.Data>
<RectangleGeometry Rect="0,0 100,50"></RectangleGeometry>
</Path.Data>
</Path>
Rect属性代表左上角X、Y坐标。后面两个值设置矩形的宽度和高度。
<Line Stroke="Blue" X1="0" Y1="0" X2="10" Y2="100"></Line>
<Path Stroke="Blue">
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="10,100"></LineGeometry>
</Path.Data>
</Path>
<Ellipse Fill="#0899FF" Height="50" Width="100" HorizontalAlignment="Left"></Ellipse>
<Path Fill="#0899FF">
<Path.Data>
<EllipseGeometry RadiusX="50" RadiusY="25" Center="50,25"></EllipseGeometry>
</Path.Data>
</Path>
使用GeometryGroup组合形状
<Canvas>
<Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10">
<Path.Data>
<GeometryGroup>
<RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
<EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"></EllipseGeometry>
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
相当于使用了两个Path元素，这样做的优点是用一个元素代替了两个元素，降低了用户界面的开销。
另一个优点是可在几个独立的Path元素中重复使用相同的几何图形，只要在Resources中定义几何图形即可。
<Window.Resources>
<GeometryGroup x:Key="Geometry">
<RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
<EllipseGeometry Center="50,50" RadiusX="35" RadiusY="25"></EllipseGeometry>
</GeometryGroup>
</Window.Resources>
<Canvas>
<TextBlock Canvas.Top="50" Canvas.Left="20" FontSize="25" FontWeight="Bold">Hello There
</TextBlock>
<Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10" Data="{StaticResource Geometry}">
</Path>
</Canvas>
如果把TextBlok放在Pah后面就是如下效果
使用CombinedGeometry融合几何图形
GemoetryGroup适用于绘制形状并在其内部减去另一个形状来创建新的形状。如果形状边界相互交叉，那就用到CombinedGeometry。CombinedGeometry用于组合到一起并且不相互包含的形状。它只包含两个几何图形，通过Geometry1和Geometry2属性提供两个几何图形。填充的规则使用GeometryCombineMode属性。
名称
说明
Union创建包含两个几何图形所有区域的形状。Intersect创建包含两个几何图形共有区域的形状。Xor创建包含两个几何图形非共有区域的形状。Exclude创建的形状包含第一个几何图形的所有区域，但不包含第二个几何图形的区域。
<Canvas>
<Path Fill="Yellow" Stroke="Blue" Margin="5">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry Center="85,50" RadiusX="65" RadiusY="35"></EllipseGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
</Canvas>
CombinedGeometry可以嵌套使用这样就可以构建非常复杂的形状。
<Canvas>
<Path Fill="Yellow" Stroke="Blue" Margin="5">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<CombinedGeometry GeometryCombineMode="Exclude">
<CombinedGeometry.Geometry1>
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"></EllipseGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry Center="50,50" RadiusX="40" RadiusY="40"></EllipseGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<RectangleGeometry Rect="45,5 10,90">
<RectangleGeometry.Transform>
<RotateTransform Angle="45" CenterX="50" CenterY="50"></RotateTransform>
</RectangleGeometry.Transform>
</RectangleGeometry>
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
</Canvas>
使用PathGeometry绘制曲线和直线
PathGeometry是功能强大的图形，它能绘制其他所有几何图形能够绘制的内容，也能绘制其他几何图形不能绘制的内容。每个PathGeometry都由一个或多个PathFigure对象组成，PathFigure的4个重要属性。
名称
说明
StartPoint指示从何处开始绘制图形的Point对象。Segments用于绘制图形的PathSegment对象的集合。IsClosed如果为True，WPF添加直线来连接起点和终点。IsFilled如果为True,就使用Path.Fill画刷填充图形内部的区域。
PathFigure对象是由大量的线段构成的。主要的线段类如下:
名称
说明
LineSegment在两点之间创建直线。ArcSegment在两点之间创建椭圆形直线。BezierSegment在两点之间创建贝塞尔曲线。QuadraticBezierSegment创建形式更简单的贝塞尔曲线，只有一个控制点而不是两个控制点，并且计算速度更快。PolyLineSegment创建一系列直线。可使用多个LineSegment对象得到相同的结果，但使用单个PolyLineSegment对象更简明。PolyBezierSegment创建一系列贝塞尔曲线。PolyQuadraticBezierSegment创建一系列更简单的二次贝塞尔曲线。
直线
<Path Stroke="Blue">
<Path.Data>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="10,100">
<LineSegment Point="100,100"></LineSegment>
<LineSegment Point="100,50"></LineSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
每个PathGeometry可包含任意数量的PathFigure对象，这意味着可创建几个相互独立或闭合图形，作为路径的一部分。
弧线
<Path Stroke="Blue">
<Path.Data>
<PathGeometry>
<PathFigure IsClosed="False" StartPoint="10,100">
<ArcSegment Point="250,150" Size="200,300"></ArcSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
贝塞尔曲线
定义贝塞尔曲线需要3个点。前两个点是控制点，第3个是曲线的终点。同样起点是路径的起点或前一条线段的终点。
在起点，贝塞尔曲线和从第一个控制点到起点之间的直线相切，在终点，贝塞尔曲线和连接终点与最后一个点的直线相切（在中间是曲线）。
弯曲程度由两个控制点的距离决定。如果一个控制点更远，该控制点会更强的拉贝塞尔曲线。
<Canvas>
<Path Stroke="Blue" StrokeThickness="5" Canvas.Top="20">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="10,10">
<BezierSegment Point1="130,30" Point2="40,140" Point3="150,150"></BezierSegment>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Green" StrokeThickness="2" StrokeDashArray="5, 2" Canvas.Top="20">
<Path.Data>
<GeometryGroup>
<LineGeometry StartPoint="10,10" EndPoint="130,30"></LineGeometry>
<LineGeometry StartPoint="40,140" EndPoint="130,150"></LineGeometry>
</GeometryGroup>
</Path.Data>
</Path>
<Path Fill="Red" Stroke="Red" StrokeThickness="8" Canvas.Top="20">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="130,30"></EllipseGeometry>
<EllipseGeometry Center="40,140"></EllipseGeometry>
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
使用几何图形进行剪裁
几何图形是创建形状的最强大的方法，另一种用途就是用于设置Clip属性，所有的元素都提供了该属性。可以通过Clip属性约束元素的外边界以符合特定的几何图形。
<Window.Resources>
<GeometryGroup x:Key="clipGremetry" FillRule="Nonzero">
<EllipseGeometry RadiusX="75" RadiusY="50" Center="100,150"></EllipseGeometry>
<EllipseGeometry RadiusX="100" RadiusY="25" Center="200,150"></EllipseGeometry>
<EllipseGeometry RadiusX="75" RadiusY="130" Center="140,140"></EllipseGeometry>
</GeometryGroup>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Clip="{StaticResource clipGremetry}"> A button
</Button>
<Image Grid.Column="1" Clip="{StaticResource clipGremetry}" Stretch="None" Source="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg"></Image>
</Grid>
转载于:https://www.cnblogs.com/lovezhangyu/p/10331012.html
