点滴积累,融会贯通

-----喜欢一切有兴趣的东西

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

原文:http://www.cnblogs.com/chukaren/archive/2010/01/18/1651141.html

 

原来说过,几何形状只是对形状的数学描述。用来描述图形时,需要放到Path的Data属性中。但Path不需要这些形状描述,直接使用字符串的图形描述语法也可以描述出各种图形。那还需要几何形状干嘛吗?

其实,几何形状最主要的用处就是裁剪,可以把显示元素显示成各种各样的形状。几何形状有:

RectangleGeometry( 矩形),EllipseGeometry(椭圆),LineGeometry(线段),PathGeometry(路径)。

而每个显示元素都会有一个Clip属性,可以把形状放到这个Clip属性里对显示元素进行裁剪。

1. RectangleGeometry(矩形)。主要属性有:

Rect: 用来描述尺寸。如 Rect=”30,0,240,100”, 对应于 x, y, width, height.

RadiusX, RadiusY: 用来定义圆角矩形。

2. EllipseGeometry (椭圆)。主要属性有:

RadiusX, RadiusY: 用来定义X半径和Y半径。

Center: 用来描述原点位置。

3. LineGeometry (线段)。主要属性有:

StartPoint, EndPoint: 定义起始点和结束点。

4. PathGeometry (路径)。主要属性有:

PathFigure: 描述内容。这是一个集合。里面可以放以下:

    LineSegment: 线段。属性有Point. 

    PolyLineSegment: 多线段。属性有Points.

    ArcSegment: 弧线。属性有Point, Size.

    BezierSegment:贝塞尔曲线。属性有Point1, Point2, Point3.

    QuadraticBezierSegment: 二次贝塞尔曲线。属性有Point1, Point2.

    PolyBezierSegment: 多段贝塞尔曲线。属性有Points.

    PolyQuadraticBezierSegment: 多段二次贝塞尔曲线。属性有Points.

以下通过实例来看一下:

1. 如使用EllipseGeometry对图形Rectangle进行裁剪。

EllipseGeometry默认的原点就是0,0. RadiusX, RadiusY分别设为宽度和高度的一半,相当于把矩形的左上角裁出来。

<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<
Rectangle Width="150" Height="100"
Fill="Red" Stroke="Black" StrokeThickness="10">
<
Rectangle.Clip>
<
EllipseGeometry RadiusX="75" RadiusY="50" />
</
Rectangle.Clip>
</
Rectangle>
</
Canvas>

cliprect

下来,通过设置不同的原点位置,把矩形的四个角裁出来。

<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<
Rectangle Width="150" Height="100"
Fill="Red" Stroke="Black" StrokeThickness="10">
<
Rectangle.Clip>
<
EllipseGeometry RadiusX="75" RadiusY="50" />
</
Rectangle.Clip>
</
Rectangle>
<
Rectangle Width="150" Height="100"
Fill="Red" Stroke="Black" StrokeThickness="10">
<
Rectangle.Clip>
<
EllipseGeometry RadiusX="75" RadiusY="50" Center="150, 0" />
</
Rectangle.Clip>
</
Rectangle>
<
Rectangle Width="150" Height="100"
Fill="Red" Stroke="Black" StrokeThickness="10">
<
Rectangle.Clip>
<
EllipseGeometry RadiusX="75" RadiusY="50" Center="0, 100" />
</
Rectangle.Clip>
</
Rectangle>
<
Rectangle Width="150" Height="100"
Fill="Red" Stroke="Black" StrokeThickness="10">
<
Rectangle.Clip>
<
EllipseGeometry RadiusX="75" RadiusY="50" Center="150, 100" />
</
Rectangle.Clip>
</
Rectangle>
</
Canvas>

cliprect1

 

 

2. 使用PathGeometry, 里面放一个ArcSegment. 用来裁剪Rectangle。

 

<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<
Rectangle Width="150" Height="100"
Fill="Red" Stroke="Black" StrokeThickness="10">
<
Rectangle.Clip>
<
PathGeometry>
<
PathFigure StartPoint="10,10">
<
ArcSegment  Point="75,50" Size="10,20" />
</
PathFigure>
</
PathGeometry>
</
Rectangle.Clip>
</
Rectangle>
</
Canvas>

arcrect

 

 

以上,PathFigure里面的StartPoint代表起始点,ArcSegment中的Point代表结束点。

ArcSegment中的Size代表弧线的宽度和高度。

3. 使用LineSegment来裁剪Rectangle。

<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<
Rectangle Width="150" Height="100"
Fill="Red" Stroke="Black" StrokeThickness="10">
<
Rectangle.Clip>
<
PathGeometry>
<
PathFigure StartPoint="10,10">
<
LineSegment Point="75,50"/>
<
LineSegment Point="0, 100" />
</
PathFigure>
</
PathGeometry>
</
Rectangle.Clip>
</
Rectangle>
</
Canvas>

linerect

以上,PathFigure中的StartPoint代表起始点,两个LineSegment代表两个端点。

4. 使用多个PathFigure中的LineSegment来裁剪Rectangle。

<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<
Rectangle Width="150" Height="100"
Fill="Red" Stroke="Black" StrokeThickness="10">
<
Rectangle.Clip>
<
PathGeometry>
<
PathFigure StartPoint="10,10">
<
LineSegment Point="75,50"/>
<
LineSegment Point="0, 100" />
</
PathFigure>
<
PathFigure StartPoint="150,0">
<
LineSegment Point="150, 100"/>
<
LineSegment Point="75, 50" />
</
PathFigure>
</
PathGeometry>
</
Rectangle.Clip>
</
Rectangle>
</
Canvas>

polyfigure

这个例子比较简单,就不用多说了吧。其它的也就不多说了,没什么好说的,就是设一下相关属性就行了。

最后说一下,使用几何形状裁剪的不仅包括各种图形,还有各种显示元素,如图像,电影等等。可以把电影直接裁成圆的,挺有意思的。通过这些就可以做成各种各样的图形。

 

posted on 2010-01-19 10:08  小寒  阅读(454)  评论(0编辑  收藏  举报