WPF基础之几何图形

时间：2024-01-23 22:02:20

 之前的总结

 路径和几何图形

Shape类还有一个类没介绍，就path类，path类能够包含任何简单形状、多组形状以及更复杂的要素，如曲线。Path类提供了Data属性，改属性接收一个Geometry对象，该对象定义路径包含一个或多个图形。
不能直接的创建Geometry对象，因为Geometry是抽象类，它子类的包含如下：
 
名称
 说明
LineGeometry 代表直线，该几何图形相当于Line形状。
RectangleGeometry 代表矩形(可以具有圆形拐角)，该几何图形相当于Rectangle形状。
EllipseGeometry 代表椭圆，该图形相当于Ellipse形状。
GeometryGroup 为单个路径添加任意多个Geometry对象，使用EvenOdd或NonZero填充规则来确定要填充的区域。
CombinedGeometry 将两个几何图形合并为一个形状。可使用CombineMode属性选择如何组合两个几何图形。
PathGeometry 代表更复杂的弧线、曲线以及直线构成的图形，并且既可以是闭合的，也可以是不闭合的。
StreamGeometry 相当于PathGeometry的只读轻量级。StreamGeometry图形可节省内存，因为它不在内存中同时保存路径的所有分段。并且这类图形一旦被创建就不能再修改。

 直线、矩形和椭圆图形

LineGeometry、RectangleGeometry以及EllipseGeometry类直接对应于Line、Rectangle以及Ellipse形状。
<Rectangle Width="100" Height="50" Fill="Yellow" Stroke="Blue"></Rectangle>
 <Path Fill="Yellow" Stroke="Blue">
            <Path.Data>
                <RectangleGeometry Rect="0,0 100,50"></RectangleGeometry>
            </Path.Data>
        </Path>
Rect属性代表左上角X、Y坐标。后面两个值设置矩形的宽度和高度。
<Line Stroke="Blue" X1="0" Y1="0" X2="10" Y2="100"></Line>
        <Path Stroke="Blue">
            <Path.Data>
                <LineGeometry StartPoint="0,0" EndPoint="10,100"></LineGeometry>
            </Path.Data>
        </Path>
 <Ellipse Fill="#0899FF" Height="50" Width="100" HorizontalAlignment="Left"></Ellipse>
        <Path Fill="#0899FF">
            <Path.Data>
                <EllipseGeometry RadiusX="50" RadiusY="25" Center="50,25"></EllipseGeometry>
            </Path.Data>
        </Path>

 使用GeometryGroup组合形状

 <Canvas>
        <Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10">
            <Path.Data>
                <GeometryGroup>
                    <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
                    <EllipseGeometry Center="150,50" RadiusX="35" RadiusY="25"></EllipseGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Canvas>
相当于使用了两个Path元素，这样做的优点是用一个元素代替了两个元素，降低了用户界面的开销。
另一个优点是可在几个独立的Path元素中重复使用相同的几何图形，只要在Resources中定义几何图形即可。
 <Window.Resources>
        <GeometryGroup x:Key="Geometry">
            <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
            <EllipseGeometry Center="50,50" RadiusX="35" RadiusY="25"></EllipseGeometry>
        </GeometryGroup>
    </Window.Resources>
    <Canvas>
        <TextBlock Canvas.Top="50" Canvas.Left="20" FontSize="25" FontWeight="Bold">Hello There</TextBlock>
        <Path Fill="Yellow" Stroke="Blue" Margin="5" Canvas.Top="10" Canvas.Left="10" Data="{StaticResource Geometry}">
        </Path>
    </Canvas>
如果把TextBlok放在Pah后面就是如下效果

 使用CombinedGeometry融合几何图形

GemoetryGroup适用于绘制形状并在其内部减去另一个形状来创建新的形状。如果形状边界相互交叉，那就用到CombinedGeometry。CombinedGeometry用于组合到一起并且不相互包含的形状。它只包含两个几何图形，通过Geometry1和Geometry2属性提供两个几何图形。填充的规则使用GeometryCombineMode属性。
 
 
名称
说明
Union 创建包含两个几何图形所有区域的形状。
Intersect 创建包含两个几何图形共有区域的形状。
Xor 创建包含两个几何图形非共有区域的形状。
Exclude 创建的形状包含第一个几何图形的所有区域，但不包含第二个几何图形的区域。 
<Canvas>
        <Path Fill="Yellow" Stroke="Blue" Margin="5">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <RectangleGeometry Rect="0,0 100,100"></RectangleGeometry>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry Center="85,50" RadiusX="65" RadiusY="35"></EllipseGeometry>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Canvas>
  
 
CombinedGeometry可以嵌套使用这样就可以构建非常复杂的形状。
 <Canvas>
        <Path Fill="Yellow" Stroke="Blue" Margin="5">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <CombinedGeometry GeometryCombineMode="Exclude">
                            <CombinedGeometry.Geometry1>
                                <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"></EllipseGeometry>
                            </CombinedGeometry.Geometry1>
                            <CombinedGeometry.Geometry2>
                                <EllipseGeometry Center="50,50" RadiusX="40" RadiusY="40"></EllipseGeometry>
                            </CombinedGeometry.Geometry2>
                        </CombinedGeometry>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry Rect="45,5 10,90">
                            <RectangleGeometry.Transform>
                                <RotateTransform Angle="45" CenterX="50" CenterY="50"></RotateTransform>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Canvas>

 使用PathGeometry绘制曲线和直线

PathGeometry是功能强大的图形，它能绘制其他所有几何图形能够绘制的内容，也能绘制其他几何图形不能绘制的内容。每个PathGeometry都由一个或多个PathFigure对象组成，PathFigure的4个重要属性。
 
名称
说明
StartPoint 指示从何处开始绘制图形的Point对象。
Segments 用于绘制图形的PathSegment对象的集合。
IsClosed 如果为True，WPF添加直线来连接起点和终点。
IsFilled 如果为True,就使用Path.Fill画刷填充图形内部的区域。
PathFigure对象是由大量的线段构成的。主要的线段类如下:
 
名称
说明
LineSegment 在两点之间创建直线。
ArcSegment 在两点之间创建椭圆形直线。
BezierSegment 在两点之间创建贝塞尔曲线。
QuadraticBezierSegment 创建形式更简单的贝塞尔曲线，只有一个控制点而不是两个控制点，并且计算速度更快。
PolyLineSegment 创建一系列直线。可使用多个LineSegment对象得到相同的结果，但使用单个PolyLineSegment对象更简明。
PolyBezierSegment 创建一系列贝塞尔曲线。
PolyQuadraticBezierSegment 创建一系列更简单的二次贝塞尔曲线。

 直线

 <Path Stroke="Blue">
            <Path.Data>
                <PathGeometry>
                    <PathFigure IsClosed="True" StartPoint="10,100">
                        <LineSegment Point="100,100"></LineSegment>
                        <LineSegment Point="100,50"></LineSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
每个PathGeometry可包含任意数量的PathFigure对象，这意味着可创建几个相互独立或闭合图形，作为路径的一部分。

 弧线

<Path Stroke="Blue">
            <Path.Data>
                <PathGeometry>
                    <PathFigure IsClosed="False" StartPoint="10,100">
                        <ArcSegment Point="250,150" Size="200,300"></ArcSegment>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
 

 贝塞尔曲线

定义贝塞尔曲线需要3个点。前两个点是控制点，第3个是曲线的终点。同样起点是路径的起点或前一条线段的终点。
  • 在起点，贝塞尔曲线和从第一个控制点到起点之间的直线相切，在终点，贝塞尔曲线和连接终点与最后一个点的直线相切（在中间是曲线）。
  • 弯曲程度由两个控制点的距离决定。如果一个控制点更远，该控制点会更强的拉贝塞尔曲线。
 <Canvas>
        <Path Stroke="Blue" StrokeThickness="5" Canvas.Top="20">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="10,10">
                        <BezierSegment Point1="130,30" Point2="40,140" Point3="150,150"></BezierSegment> 
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
        <Path Stroke="Green" StrokeThickness="2" StrokeDashArray="5, 2" Canvas.Top="20">
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry StartPoint="10,10" EndPoint="130,30"></LineGeometry>
                    <LineGeometry StartPoint="40,140" EndPoint="130,150"></LineGeometry>
                </GeometryGroup>
            </Path.Data>  
        </Path>
        <Path Fill="Red" Stroke="Red" StrokeThickness="8" Canvas.Top="20">
            <Path.Data>
                <GeometryGroup>
                    <EllipseGeometry Center="130,30"></EllipseGeometry>
                    <EllipseGeometry Center="40,140"></EllipseGeometry>
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Canvas>

 使用几何图形进行剪裁

几何图形是创建形状的最强大的方法，另一种用途就是用于设置Clip属性，所有的元素都提供了该属性。可以通过Clip属性约束元素的外边界以符合特定的几何图形。
<Window.Resources>
        <GeometryGroup x:Key="clipGremetry" FillRule="Nonzero">
            <EllipseGeometry RadiusX="75" RadiusY="50" Center="100,150"></EllipseGeometry>
            <EllipseGeometry RadiusX="100" RadiusY="25" Center="200,150"></EllipseGeometry>
            <EllipseGeometry RadiusX="75" RadiusY="130" Center="140,140"></EllipseGeometry>
        </GeometryGroup>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Clip="{StaticResource clipGremetry}"> A button</Button>
        <Image Grid.Column="1" Clip="{StaticResource clipGremetry}" Stretch="None" Source="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg"></Image>
    </Grid>
 

相关文章