WPF 10天修炼 第九天 - 几何图形
几何图形
使用LineGeometry、RectangleGeometry、EllipseGeometry对象分别绘制直线、矩形、椭圆。
使用GeometryGroup可以绘制组合图形。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<Window x:Class="WPFDemo.GeometryDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" WindowStartupLocation="CenterScreen" Title="GeometryDemo" Height="500" Width="800"> <Canvas> <StackPanel Canvas.Top="10" > <TextBlock Text="绘制无相交组合图形"></TextBlock> <Path StrokeThickness="1" Fill="Yellow" Stroke="Black" Margin="5" > <Path.Data > <!--使用GeometryGroup组合集合图形--> <GeometryGroup > <!--绘制直线--> <LineGeometry StartPoint="10,20" EndPoint="100,20" /> <!--绘制矩形--> <RectangleGeometry Rect="10,50,100,50" /> <!--绘制椭圆--> <EllipseGeometry RadiusX="50" RadiusY="25" Center="60,160"/> </GeometryGroup> </Path.Data> </Path> </StackPanel> <StackPanel Canvas.Top="10" Canvas.Left="150"> <TextBlock Text="Nonzero方式填充图形"></TextBlock> <Path StrokeThickness="1" Fill="Yellow" Stroke="Black" Margin="5"> <Path.Data > <!--使用GeometryGroup组合集合图形--> <GeometryGroup FillRule="Nonzero"> <!--绘制直线--> <LineGeometry StartPoint="10,20" EndPoint="100,20" /> <!--绘制矩形--> <RectangleGeometry Rect="10,50,100,50" /> <!--绘制椭圆--> <EllipseGeometry RadiusX="50" RadiusY="25" Center="60,50"/> </GeometryGroup> </Path.Data> </Path> </StackPanel> <StackPanel Canvas.Top="10" Canvas.Left="300"> <TextBlock Text="EvenOdd方式填充图形"></TextBlock> <Path StrokeThickness="1" Fill="Yellow" Stroke="Black" Margin="5" > <Path.Data > <!--使用GeometryGroup组合集合图形--> <GeometryGroup FillRule="EvenOdd"> <!--绘制直线--> <LineGeometry StartPoint="10,20" EndPoint="100,20" /> <!--绘制矩形--> <RectangleGeometry Rect="10,50,100,50" /> <!--绘制椭圆--> <EllipseGeometry RadiusX="50" RadiusY="25" Center="60,50"/> </GeometryGroup> </Path.Data> </Path> </StackPanel> </Canvas></Window> |
使用CombinedGeometry结合形状
使用GeometryCombineMode的枚举属性可以为组合图形应用一些布尔运算。
Union：通过采用两个区域的并集合并两个区域。新的图形为两个图形。
Inntersect：通过采用两个区域的交集合并两个区域。新的图形为两个图形相交部分。
Xor：将在第一个图形中但不在第二个图形中的区域，和在第二个图形但不在第一个图形的区域进行合并。新的区域为（A-B）+（B-A）组成。
Exclude：从第一个图形总除去第二个图形。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<Window x:Class="WPFDemo.CombinedGeometryDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" WindowStartupLocation="CenterScreen" Title="CombinedGeometryDemo" Height="530" Width="500"> <Canvas> <StackPanel Canvas.Left="10" Canvas.Top="10"> <TextBlock Text="Union计算组合图形" /> <Path Stroke="Black" StrokeThickness="1" Fill="Yellow" > <Path.Data> <!---使用Union组合多个图形--> <CombinedGeometry GeometryCombineMode="Union"> <CombinedGeometry.Geometry1> <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75"/> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> </Path> </StackPanel> <StackPanel Canvas.Left="250" Canvas.Top="10"> <TextBlock Text="Exclude计算组合图形" /> <Path Stroke="Black" StrokeThickness="1" Fill="Yellow" > <Path.Data> <!---使用Exclude组合多个图形--> <CombinedGeometry GeometryCombineMode="Exclude"> <CombinedGeometry.Geometry1> <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75"/> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> </Path> </StackPanel> <StackPanel Canvas.Left="10" Canvas.Top="250"> <TextBlock Text="Intersect计算组合图形" /> <Path Stroke="Black" StrokeThickness="1" Fill="Yellow" > <Path.Data> <!---使用Intersect组合多个图形--> <CombinedGeometry GeometryCombineMode="Intersect"> <CombinedGeometry.Geometry1> <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75"/> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> </Path> </StackPanel> <StackPanel Canvas.Left="250" Canvas.Top="250"> <TextBlock Text="Xor计算组合图形" /> <Path Stroke="Black" StrokeThickness="1" Fill="Yellow" > <Path.Data> <!---使用Xor组合多个图形--> <CombinedGeometry GeometryCombineMode="Xor"> <CombinedGeometry.Geometry1> <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75"/> </CombinedGeometry.Geometry1> <CombinedGeometry.Geometry2> <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75"/> </CombinedGeometry.Geometry2> </CombinedGeometry> </Path.Data> </Path> </StackPanel> </Canvas></Window> |
PathGeometry对象
PathGeometry对象是集合图形中最强大的元素，使用该对象可以绘制弧形、曲线、椭圆、直线和矩形等组成的复杂图形。每个PathGeomery对象都使用一个和多个PathFigure对象，该对象存储在PathGeometry.Figures集合中。每个PathFigure对象都可以由一个或多个PathSegment对象组成。每个PathGeomery对象都使用一个和多个PathFigure对象，该对象存在PaathGeometryFigures集合中。每个PathFigure对象都有一个或多个PathSegment对象组成。
PathFigure的重要属性：
StartPoint：指定线段的起点
Segments：一个PathSegment对象的集合，用于绘制图形。
IsClosed：如果设置为true，将添加一个直线连接起点和终点。
IsFilled：如果设置为true，图形的内部区域将使用Path.Fill画刷填充。
PathSegment派生类：
LineSegment：在两个点之间创建直线。
ArcSegment：在两个点之间创建圆弧。
BezierSegment：在两个点之间创建贝塞尔曲线。
QuadraticBezierSegment：在PathFigure的两点之间创建一条二次赛贝尔曲线。
PolyLineSegment：创建一系列直线，可以使用多个LineSegment对象获得同样的效果，但是使用polyLineSegment更简单。
PolyBeeierSegment：创建一条或多条三次贝塞尔曲线。
PolyQuadraticBezierSegment：创建一系列二次贝塞尔线段。
使用PathGeeometry绘制图形
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<Window x:Class="WPFDemo.PathGeometryDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDemo" mc:Ignorable="d" Title="PathGeometryDemo" Height="350" Width="700"> <Canvas> <!--绘制直线--> <StackPanel Canvas.Top="10" Canvas.Left="10"> <TextBlock Text="绘制直线IsClose设置为False"/> <Path Stroke="Blue"> <Path.Data> <PathGeometry> <PathFigure IsClosed="True" StartPoint="10,10" > <!--使用LineSegment绘制直线--> <LineSegment Point="10,100"/> <LineSegment Point="100,50"/> </PathFigure> </PathGeometry> </Path.Data> </Path> </StackPanel> <StackPanel Canvas.Top="150" Canvas.Left="10"> <TextBlock Text="绘制直线IsClose设置为False"/> <Path Stroke="Blue"> <Path.Data> <PathGeometry> <PathFigure IsClosed="False" StartPoint="10,10" > <!--使用LineSegment绘制直线--> <LineSegment Point="10,100"/> <LineSegment Point="100,50"/> </PathFigure> </PathGeometry> </Path.Data> </Path> </StackPanel> <!--绘制弧线--> <StackPanel Canvas.Left="200" Canvas.Top="10"> <Path Stroke="Black" StrokeThickness="1"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigureCollection> <PathFigure StartPoint="10,10"> <PathFigure.Segments> <PathSegmentCollection> <!--绘制弧线--> <ArcSegment Size="100,50" RotationAngle="45" IsLargeArc="True" SweepDirection="Counterclockwise" Point="200,100"></ArcSegment> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathFigureCollection> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </StackPanel> <!--绘制贝塞尔曲线--> <StackPanel Canvas.Top="10" Canvas.Left="400"> <Path Stroke="Black" StrokeThickness="5" > <Path.Data> <PathGeometry> <PathFigure StartPoint="10,10"> <!--绘制贝塞尔曲线--> <BezierSegment Point1="130,30" Point2="40,140" Point3="150,150" /> </PathFigure> </PathGeometry> </Path.Data> </Path> </StackPanel> </Canvas></Window> |
HK
浙公网安备 33010602011771号