前言:Silverlight 2.0 Beta1 已经发布,加入了许多激动人心的新特性:WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记,写的比较乱,因此定名为乱弹琴Silverlight 2.0 系列文章。
本篇介绍几何图形(Geometry)其余的内容。
Path:
Path用于绘制一系列相互连接的直线和曲线,可以绘制闭合或开放的形状、多个形状,甚至曲线形状。
Path主要通过Path.Data属性来呈现复合形状。
Path能直接呈现的有:
EllipseGeometry:表示椭圆的几何图形
LineGeometry:表示线条的几何图形
RectangleGeometry:表示矩形的几何图形
GeometryGroup:几何图形组
PathGeometry:表示一个可能由弧、曲线、椭圆、直线和矩形组成的复杂形状。
实例:
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="2" Fill="Orange">
<Path.Data>
<EllipseGeometry Center="200,150" RadiusX="150" RadiusY="100"></EllipseGeometry>
</Path.Data>
</Path>
</Grid>
相同效果的C#:
Path path = new Path();
EllipseGeometry ellipse = new EllipseGeometry();
path.Stroke = new SolidColorBrush(Colors.Yellow);
path.StrokeThickness = 2;
path.Fill = new SolidColorBrush(Colors.Orange);
ellipse.Center = new Point(200, 150);
ellipse.RadiusX = 150;
ellipse.RadiusY = 100;
path.Data = ellipse;
LayoutRoot.Children.Add(path);
运行效果:
不能直接在Path.Data中绘制多个几何图形,若想绘制多个,必须用GeometryGroup。
XAML:
<Grid x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="2" Fill="Orange">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="200,150" RadiusX="150" RadiusY="100"></EllipseGeometry>
<RectangleGeometry Rect="10,10,200,200"></RectangleGeometry>
<LineGeometry StartPoint="10,150" EndPoint="390,150"></LineGeometry>
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
C#:
Path path = new Path();
GeometryGroup group = new GeometryGroup();
EllipseGeometry ellipse = new EllipseGeometry();
RectangleGeometry rectangle = new RectangleGeometry();
LineGeometry line = new LineGeometry();
path.Stroke = new SolidColorBrush(Colors.Yellow);
path.StrokeThickness = 2;
path.Fill = new SolidColorBrush(Colors.Orange);
ellipse.Center = new Point(200, 150);
ellipse.RadiusX = 150;
ellipse.RadiusY = 100;
rectangle.Rect = new Rect(10, 10, 200, 200);
line.StartPoint = new Point(10, 150);
line.EndPoint = new Point(390, 150);
group.Children.Add(ellipse);
group.Children.Add(rectangle);
group.Children.Add(line);
path.Data = group;
LayoutRoot.Children.Add(path);
运行效果:
从效果图上可以看出,重叠部分填充不同,这是因为GeometryGroup设置了不同的填充规则:
FillRule="EvenOdd":此规则确定一个点是否位于填充区域内,具体方法是从该点沿任意方向画一条无限长的射线,然后计算该射线在给定形状中因交叉而形成的路径段数。如果该数为奇数,则点在内部;如果为偶数,则点在外部。
FillRule="Nonzero":此规则确定一个点是否位于路径的填充区域内,具体方法是从该点沿任意方向画一条无限长的射线,然后检查形状段与射线的交点。从零开始计数,每当线段从左向右与射线相交时就加 1,而每当路径段从右向左与射线相交时就减 1。计算交点的数目后,如果结果为零,则说明该点位于路径外部。否则,它位于路径内部。(从左到右或从右到左是沿着射线方向相交线的绘制方向)
PathGeometry
PathGeometry 对象由一个或多个 PathFigure 对象组成;每个 PathFigure 都表示一个不同的“图形”或形状。每个 PathFigure 自身又由一个或多个 PathSegment 对象组成,每个对象均表示图形或形状的已连接部分。线段类型包括 LineSegment、ArcSegment 和 BezierSegment。
XAML:
<Canvas x:Name="LayoutRoot" Background="DarkGreen">
<Path Stroke="Yellow" StrokeThickness="2" Fill="Orange">
<Path.Data>
<PathGeometry>
<PathFigureCollection>
<PathFigure StartPoint="50,50">
<LineSegment Point="350,150"></LineSegment>
</PathFigure>
<PathFigure StartPoint="50,50">
<PathFigure.Segments>
<PathSegmentCollection>
<BezierSegment Point1="50,210" Point2="80,240" Point3="200,280"></BezierSegment>
<LineSegment Point="260,135"></LineSegment>
<LineSegment Point="340,165"></LineSegment>
<LineSegment Point="350,150"></LineSegment>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry>
</Path.Data>
</Path>
<TextBlock Foreground="Red" FontSize="24" Canvas.Top="120"
Canvas.Left="100" FontWeight="900" Text="★民族英雄">
<TextBlock.RenderTransform>
<RotateTransform Angle="20"></RotateTransform>
</TextBlock.RenderTransform>
</TextBlock>
</Canvas>
运行效果:
结束语
博客一段时间没更新,确实偷懒了,不过也确实忙。
Geometry内容繁多,这几篇只介绍了点皮毛,使用时要多查MSDN文档。
下一篇介绍图像变换。