用 Silverlight Geometry 对象来定义形状？
什么是 Geometry？
Shape 元素进行了比较：
Geometry 与 Shape 的比较
Geometry 对象更通用。
一个 Geometry。
采用 Geometry 的常见属性
下表列出了采用 Geometry 对象的一些属性。
Geometry 对象可以分为三个类别：简单几何图形、路径几何图形以及复合几何图形。
简单的几何图形类包括 EllipseGeometry，用于创建基本的几何形状，如直线、矩形和圆。
-
LineGeometry 通过指定直线的起点和终点来定义。
-
RadiusY 属性来创建圆角矩形。
-
EllipseGeometry 通过中心点、x 半径和 y 半径来定义。
尽管可以通过使用 PathGeometry 或通过将 Geometry 对象组合在一起来创建这些形状以及更复杂的形状，但是简单几何图形类提供了一种生成这些基本几何形状的简单方式。
下面的示例演示如何创建并呈现 StrokeThickness 属性。
<Path Stroke="Black" StrokeThickness="1" >
<Path.Data>
<LineGeometry StartPoint="10,20" EndPoint="100,130" />
</Path.Data>
</Path>
</Canvas>
下图显示此示例的输出。
下一个示例演示如何创建并呈现 Gold）来绘制椭圆的内部。
<Path Fill="Gold" Stroke="Black" StrokeThickness="1">
<Path.Data>
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
</Path.Data>
</Path>
</Canvas>
下图显示此示例的输出。
下面的示例演示如何创建并呈现 Rect 结构定义。位置是 (50,50)，高度和宽度均为 25，这将创建一个正方形。
<Path Fill="LemonChiffon" Stroke="Black" StrokeThickness="1">
<Path.Data>
<RectangleGeometry Rect="50,50,25,25" />
</Path.Data>
</Path>
</Canvas>
下图显示此示例的输出。
下面的示例演示如何将 Clip 属性。只有位于椭圆区域内部的图像部分才会显示。
<Image Source="Water_lilies.jpg"
Width="200" Height="150">
<Image.Clip>
<EllipseGeometry RadiusX="100" RadiusY="75" Center="100,75"/>
</Image.Clip>
</Image>
</Grid>
下图显示此示例的输出。
PathGeometry 对象和几何图形 mini-language 提供了描绘由弧线、曲线和直线组成的多个复杂图形的方法。
PathSegment 对象组成，每个这样的对象均描绘图形的一条线段。下表列出了各种线段类型。
|
线段类型 |
说明 |
|---|---|
|
在两个点之间创建一条椭圆弧线。 |
|
|
在两个点之间创建一条三次方贝塞尔曲线。 |
|
|
在两个点之间创建一条直线。 |
|
|
创建一系列三次方贝塞尔曲线。 |
|
|
创建一系列直线。 |
|
|
创建一系列二次贝塞尔曲线。 |
|
|
创建一条二次贝塞尔曲线。 |
LineSegment，可定义一条从 (10,50) 到 (10,150) 的竖线。
下面的示例创建一个简单 LineSegment。
<Path Stroke="Black" StrokeThickness="1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="10,20">
<PathFigure.Segments>
<LineSegment Point="100,130"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
下图显示了此示例创建的 PathGeometry。
有必要将此示例与前面的 PathGeometry 的详细语法可以创建极其复杂的几何区域。
通过组合 PathSegment 对象可以创建更复杂的几何图形。
下一个示例使用一个 ArcSegment 来创建形状。
-
该示例首先通过定义四个点来创建一个三次方贝塞尔曲线：起点（是前一条线段的终点）、终点 (Point2 影响曲线的结束部分。
-
然后该示例添加一个 LineSegment 属性所指定的点之间绘制该线段。
-
然后该示例添加一个 SweepDirection)。
<Path Stroke="Black" StrokeThickness="1" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="10,50">
<PathFigure.Segments>
<BezierSegment Point1="100,0"
Point2="200,200"
Point3="300,100"/>
<LineSegment Point="400,100" />
<ArcSegment Size="50,50" RotationAngle="45"
IsLargeArc="True" SweepDirection="Clockwise"
Point="200,100"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
下图显示了此示例创建的形状。
通过在一个 PathFigure 对象，可以创建更复杂的几何图形。
下面的示例创建一个具有两个 QuadraticBezierSegment 是用控制点和终点定义的。
<Path Stroke="Black" StrokeThickness="1" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="10,50">
<PathFigure.Segments>
<BezierSegment Point1="100,0"
Point2="200,200"
Point3="300,100"/>
<LineSegment Point="400,100" />
<ArcSegment Size="50,50" RotationAngle="45"
IsLargeArc="True" SweepDirection="Clockwise"
Point="200,100"/>
</PathFigure.Segments>
</PathFigure>
<PathFigure StartPoint="10,100">
<PathFigure.Segments>
<PolyLineSegment Points="50,100 50,150" />
<QuadraticBezierSegment Point1="200,200" Point2="300,100"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
</Canvas>
下图显示了此示例创建的形状。
路径标记语法
Silverlight 路径标记语法。
可以使用 Geometry。
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<!-- Creates a composite shape from three geometries. -->
<GeometryGroup FillRule="EvenOdd">
<LineGeometry StartPoint="10,10" EndPoint="50,30" />
<EllipseGeometry Center="40,70" RadiusX="30" RadiusY="30" />
<RectangleGeometry Rect="30,55 100 30" />
</GeometryGroup>
</Path.Data>
</Path>
</Canvas>
下图显示此示例的输出。