WPF基础之几何图形

之前的总结

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