几何图形和画图
Contents
Path类能够包含任何简单形状、多组形状以及更复杂的要素,如曲线。
几何图形类
名称 | 说明 |
---|---|
LineGeometry | 代表直线,该几何图形相当于Line形状 |
RectangleGeometry | 代表矩形,该几何图形相当于Rectangle形状 |
EllipseGeometry | 代表椭圆,相当于Ellipse |
GeometryGroup | 为大哥路径添加任意多个Geometry对象,使用EvenOdd或NonZero填充规则来确定要填充的区域 |
CombinedGeometry | 将两个几何图形合并为一个形状,可使用CimbineMode属性选择如何组合两个几何图形 |
PathGeometry | 代表更复杂的由弧线、曲线以及直线构成的图形,并且既可以是闭合的,也可以是不闭合的。 |
StreamGeometry | 相当于PathGeometry的只读的轻量级类.StreamGeometry图形可节省内存,因为它不在内存中同事保存路径的所有单个分段,并且这类图形一旦被创建就不能再修改 |
几何图形类并不想看起来那么简单,原因之一是他们都继承自Freezable类(通过Geometry基类),所以支持更改通知。因此,如果使用几何图形创建路径,然后修改几何图形,就会自动被重新绘制路径。
直线、矩形和椭圆图形
<Path Fill="Yellow" Stroke="Blue">
<Path.Data>
<RectangleGeometry Rect="0,0 100,50"></RectangleGeometry>
</Path.Data>
</Path>
RectangleGeometry类还提供了RadiusX和RadiusY属性。
使用GeometryGroup组合形状
组合图形最简单的方法是使用GeometryGroup对象,该对象在内部嵌套其他Geometry类的派生类对象
<Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10">
<Path.Data>
<GeometryGroup>
<RectangleGeometry Rect="0,0 100,100"/>
<EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"/>
</GeometryGroup>
</Path.Data>
</Path>
使用CombinedGeometry融合几何图形
CombinedGeometry类没有包含FillRule属性,反而具有功能更强大的GeometryCombinMode属性:
名称 | 说明 |
---|---|
Union | 创建包含两个图形所有区域的形状 |
Intersect | 创建包含两个几何图形共有区域的形状 |
Xor | 创建包含两个几何图形非公有区域的形状 |
Exclude | 创建的形状包含第一个几何图形的所有区域,但不包含第二个几何图形的区域 |
<Path Fill="Yellow" Stroke="Blue" StrokeThickness="3" Margin="5" Canvas.Top="80.72" Canvas.Left="267.662">
<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>
使用PathGeometry绘制曲线和直线
每个PathGeometry对象都是由一个或多个PathFigure对象构建的(存储在PathGeometry.Figures集合中)。每个PathFigure对象是一系列互相连接的直线和曲线,可闭合也可不闭合
PathFigure属性
名称 | 说明 |
---|---|
StartPoint | 指示从何处开始绘制图形线条的Point对象 |
Segments | 用于绘制图形的PathSegment对象的集合 |
IsClosed | 如果为True,WPF添加直线来连接起点和重点(假设他们不是同一个点) |
IsFilled | 如果为True,就是用Path.Fill画刷填充图形内部的区域 |
PathSegment类
名称 | 说明 |
---|---|
LineSegment | 在两点之间创建直线 |
ArcSegment | 在两点之间创建椭圆弧线 |
BezierSegment | 在两点之间创建贝塞尔曲线 |
QuadraticBezierSegment | 创建形式更简单的贝塞尔曲线,只有一个控制点而不是两个控制点,并且计算速度更快 |
PolyLineSegment | 创建一系列直线,可使用多个LineSegment对象得到相同的效果,但使用单个PolyLineSegment对象更简明 |
PolyBezierSegment | 创建一系列贝塞尔曲线 |
PolyQuadraticBezierSegment | 创建一系列更简单的二次贝塞尔曲线 |
<Path Stroke="Blue" Fill="Yellow">
<Path.Data>
<PathGeometry>
<PathFigure IsClosed="True" StartPoint="10,100">
<LineSegment Point="100,100"/>
<LineSegment Point="100,50"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
弧线 ArcSegment.IsLargeArc属性设置弧线的方向
微语言几何图形
<Path Stroke="Red">
<Path.Data>
<PathGeometry Figures="M 100,100 l 200,200 l -200,0 z">
</PathGeometry>
</Path.Data>
</Path>
微语言图形命令
名称 | 说明 |
---|---|
F value | 设置Geometry.FillRull属性,0表示EvenOdd,1表示NonZero,如果决定使用该命令,就必须将该命令放在字符串的开头 |
M x,y | 为几何图形创建新的PathFigure对象,并设置其起点,该命令必须在其他命令之前使用,F命令除外。然而,也可以在绘制序列器件使用该命令移动坐标移动的原点 |
L x,y | 创建一条到指定点的LineSegment几何图形 |
H x | 使用指定的X值创建一条水平的LineSegment,并保持Y不变 |
V y | 使用指定的Y值创建一条水平的LineSegment,并保持X不变 |
A radiusX,RadiusY degrees isLargeArc,isClockwise x,y | 创建一条指定点的ArgSegment线段,。指定弧线的椭圆半径,弧线旋转的度数,以及用于设置前面介绍的IsLargeArc和SweepDirection属性的布尔标志 |
C x1,y1,x2,y2,x,y | 创建到指定带你的贝塞尔曲线,使用点(x1,y1)和(x2,y2)作为控制点 |
S x2,y2 x,y | 通过将前一条贝塞尔曲线的第二个控制点作为新建贝塞尔曲线的第一个控制点,从而创建一条光滑的贝塞尔曲线 |
Z | 结束当前PathFigure对象,并将IsClosed属性设置为True.如果不希望将IsClosed属性设置为True,就不必使用该命令——如果希望开始一个新的Path对象或结束字符串,只需要使用M命令 |
提示
在微雨燕集合图形中另一个技巧。如果希望命令的参数值相对于前一个点,而不是使用绝对坐标,可使用小写命令
使用集合图形进行剪裁
<Window.Resources>
<GeometryGroup x:Key="clipGeometry" FillRule="Nonzero">
<EllipseGeometry RadiusX="75" RadiusY="50" Center="100,150"/>
<EllipseGeometry RadiusX="100" RadiusY="25" Center="200,150"/>
<EllipseGeometry RadiusX="75" RadiusY="130" Center="140,10"/>
</GeometryGroup>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Clip="{StaticResource clipGeometry}" Click="Button_Click">A BUTTON</Button>
</Grid>