代码改变世界

silverlight系列(Geometry、Path、Transforms、3DEffects)

2010-03-03 11:06  key_sky  阅读(1130)  评论(1)  编辑  收藏  举报

一、Geometry:

简单几何图形包括LineGeometry、RectangleGeometry 和 EllipseGeometry，用于创建基本的几何形状，如直线、矩形和圆。

  • LineGeometry 通过指定直线的起点和终点来定义。
  • RectangleGeometry 通过使用 Rect 结构来定义，该结构指定矩形的相对位置、高度和宽度。您可以通过设置 RadiusX 和RadiusY 属性来创建圆角矩形。
  • EllipseGeometry 通过中心点、x 半径和 y 半径来定义。

二、Path

路径几何图形PathGeometry是PathFigure对象的集合，每个PathFigure由一个或多个PathSegment对象组成，每个对象描绘图形的一条线段。

  • ArcSegment:在两个点之间创建一个椭圆弧线。
  • BezierSegment:在两个点之间创建一条三次方贝塞尔曲线。
  • LineSegment:两个点之间创建一条直线。
  • PolyBezierSegment:创建一系列三次方贝赛尔曲线。
  • PolyLineSegment:创建一系列直线。
  • PolyQuadraticBezierSegment:创建一系列二次贝塞尔曲线。
  • QuadraticBezierSegment:创建一条二次贝塞尔曲线。

三、Transforms

Transform定义如何将一个坐标空间的点映射或变换到另一个坐标空间。映射由Matrix来（三行三列的Double集合）描述。

矩阵结构：M11,M12 M21,M22 OffsetX,OffsetY.默认值都为0。

变换类：

  • RotateTransform:指定Angle旋转元素,默认旋转为(0,0)，用CenterX，CenterY改变旋转点。
  • ScaleTransform:按指定的ScaleX和ScaleY量按比例缩放元素。
  • SkewTransform:按指定的AngleX和AngleY量扭曲元素。
  • TranslateTransform:按指定的X和Y变量移动元素。

四、3DEffects

  • RotationX 属性指定围绕对象的水平轴旋转。
  • RotationY 属性围绕旋转中心的 y 轴旋转。
  • RotationZ 属性围绕旋转中心的 z 轴（直接穿过对象平面的直线）旋转。
  • GlobalOffsetX 沿屏幕对齐的 x 轴平移对象。
  • GlobalOffsetY 沿屏幕对齐的 y 轴平移对象。
  • GlobalOffsetZ 沿屏幕对齐的 z 轴平移对象。

Geometry.xaml:

<UserControl x:Class="GeoMetry.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d=http://schemas.microsoft.com/expression/blend/2008
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Width="500" Height="400" 
Background="Wheat">
        <Path Stroke="Black" StrokeThickness="1">
            <Path.Data>
                <LineGeometry StartPoint="10,10" EndPoint="80,150"/>
            </Path.Data>
        </Path>
        <Path Fill="Red" Stroke="Black" StrokeThickness="2">
            <Path.Data>
                <EllipseGeometry Center="150,80" RadiusX="50" RadiusY="50"/>
            </Path.Data>
        </Path>
        <Path Fill="Gold" Stroke="Blue" StrokeThickness="2">
            <Path.Data>
                <RectangleGeometry Rect="10,150,50,50"/>
            </Path.Data>
        </Path>
        <!--
          简单几何图形包括LineGeometry、RectangleGeometry 和 EllipseGeometry，
用于创建基本的几何形状，如直线、矩形和圆。 
          LineGeometry 通过指定直线的起点和终点来定义。 
          RectangleGeometry 通过使用 Rect 结构来定义，该结构指定矩形的相对位置、高度和宽度。
您可以通过设置 RadiusX 和 RadiusY 属性来创建圆角矩形。 
          EllipseGeometry 通过中心点、x 半径和 y 半径来定义。

        -->
        <Path Stroke="Green" StrokeThickness="2">
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="20,180">
                            <PathFigure.Segments>
                                <LineSegment Point="80,270"/>
                                <BezierSegment Point1="130,180" Point2="190,250" Point3="300,170"/>
                                <ArcSegment Size="100,100" RotationAngle="45" IsLargeArc="True"
                                            SweepDirection="Counterclockwise" Point="20,180"/>
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
        <!--
          路径几何图形PathGeometry是PathFigure对象的集合
        ，每个PathFigure由一个或多个PathSegment对象组成，每个
          对象描绘图形的一条线段。
          ArcSegment:在两个点之间创建一个椭圆弧线
          BezierSegment:在两个点之间创建一条三次方贝塞尔曲线
          LineSegment:两个点之间创建一条直线
          PolyBezierSegment:创建一系列三次方贝赛尔曲线
          PolyLineSegment:创建一系列直线
          PolyQuadraticBezierSegment:创建一系列二次贝塞尔曲线
          QuadraticBezierSegment:创建一条二次贝塞尔曲线
        -->
        <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
            <Path.Data>
                <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>
</UserControl>

运行效果：

Transforms.xaml:

<Canvas Background="AliceBlue" Width="500" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Rectangle Width="50" Height="50" Fill="Red" Margin="5,5,5,5"  >
            <Rectangle.RenderTransform>
                <RotateTransform Angle="30" CenterX="20" CenterY="20"/>
            </Rectangle.RenderTransform>
            </Rectangle>
        <Rectangle Width="50" Height="50" Fill="Green" Margin="5,5,5,5" Canvas.Left="75"  >
            <Rectangle.RenderTransform>
                <ScaleTransform ScaleX="0.8" ScaleY="0.7"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle Width="50" Height="50" Fill="Gray" Margin="5,5,5,5" Canvas.Left="150"  >
            <Rectangle.RenderTransform>
                <SkewTransform AngleX="15" AngleY="20"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <!--
        Transform定义如何将一个坐标空间的点映射或变换到另一个坐标空间。映射由Matrix来（三行三列的Double集合）描述。
        矩阵结构：M11,M12 M21,M22 OffsetX,OffsetY.默认值都为0
        变换类：
        RotateTransform:指定Angle旋转元素,默认旋转为(0,0)，用CenterX，CenterY改变旋转点
        ScaleTransform:按指定的ScaleX和ScaleY量按比例缩放元素
        SkewTransform:按指定的AngleX和AngleY量扭曲元素
        TranslateTransform:按指定的X和Y变量移动元素
        -->
    </Canvas>

运行效果：

3DEffects.xaml:

<Canvas Background="AliceBlue" Width="500" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top">
        <StackPanel Canvas.Left="5" Canvas.Top="5">
            <StackPanel.Projection>
                <PlaneProjection RotationX="0" RotationY="-60"/>
            </StackPanel.Projection>
            <Image Source="1.JPG" Width="150" Height="120"/>
        </StackPanel>
        <StackPanel Canvas.Left="155" Canvas.Top="5">
            <StackPanel.Projection>
                <PlaneProjection RotationX="-60" />
            </StackPanel.Projection>
            <Image Source="2.JPG" Width="150" Height="120"/>
        </StackPanel>
        <StackPanel Canvas.Left="320" Canvas.Top="5">
            <StackPanel.Projection>
                <PlaneProjection RotationX="0" RotationY="60"/>
            </StackPanel.Projection>
            <Image Source="3.JPG" Width="150" Height="120"/>
        </StackPanel>
        <!--
          RotationX 属性指定围绕对象的水平轴旋转
          RotationY 属性围绕旋转中心的 y 轴旋转。
          RotationZ 属性围绕旋转中心的 z 轴（直接穿过对象平面的直线）旋转
          GlobalOffsetX 沿屏幕对齐的 x 轴平移对象。
          GlobalOffsetY 沿屏幕对齐的 y 轴平移对象。
          GlobalOffsetZ 沿屏幕对齐的 z 轴平移对象。
        -->
    </Canvas>

运行效果：