飘遥的Blog

C/C++/.NET
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

乱弹琴 Silverlight 2.0 (15) 几何图形(Geometry)(三)

Posted on 2008-04-26 21:01  Zzx飘遥  阅读(982)  评论(0编辑  收藏  举报

前言: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文档。
下一篇介绍图像变换。