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> |