Silverlight文本变形教程

Silverlight文本的变形可以实现旋转,缩放,倾斜等效果.这些效果是通过Transform类的派生类实现的.

下面是这些类的具体功能

1）RotateTransform：旋转变形，可以控制文本的旋转角度；

2）ScaleTransform：缩放变形，可以控制文本的缩放比例；

3）SkewTransform：倾斜变形，自定义元素的斜体效果；

4）TranslateTransform：移动变形，控制文本相对于原始位置的距离；

5）TransformGroup：组合变形，组合多个变形；

6）MatrixTransform：矩形变形，二维空间中任意控制文本或坐标系统。

下面我们还是通过例子来看一下这些派生类所能实现的效果吧！代码如下：

       <TextBlock Text="Rotate text" FontSize="20"/>

          <!--旋转变形文本-->

          <TextBlock Text="Rotate text" FontSize="20">

            <TextBlock.RenderTransform>

                   <RotateTransform. Angle="45" CenterX="30" CenterY="30"/>       

              </TextBlock.RenderTransform>

         </TextBlock>

我们在这里设置Angle属性的值表示旋转的角度，运行效果如图：

缩放变形可以从宽度和高度两个方向来控制文本的大小，代码如下：

       <TextBlock Text="Scaled text" FontSize="20"/>

       <!--增大文本宽度-->

          <TextBlock Text="Scaled text" FontSize="20">

            <TextBlock.RenderTransform>

                   <ScaleTransform. ScaleX="3"/> 

              </TextBlock.RenderTransform>

          </TextBlock>

          <!--增大文本高度-->

         <TextBlock Text="Scaled text" FontSize="20">

            <TextBlock.RenderTransform>

                   <ScaleTransform. ScaleY="2"/> 

              </TextBlock.RenderTransform>

          </TextBlock>

我们在这里设置ScaleX和ScaleY的值，表示在文本在宽度和高度上是原来的N倍，这个N表示我们设置ScaleX和ScaleY的值，效果如图所示：

我们可以通过倾斜变形来设置文本在垂直方向和水平方形的倾斜，代码如下：

       <TextBlock Text="Scaled text" FontSize="20"/>

       <!--文本水平倾斜-->

          <TextBlock Text="Scaled text" FontSize="20">

            <TextBlock.RenderTransform>

                   <SkewTransform. AngleX="45"/>      

              </TextBlock.RenderTransform>

          </TextBlock>

          <!--文本垂直倾斜-->

         <TextBlock Text="Scaled text" FontSize="20">

            <TextBlock.RenderTransform>

                   <SkewTransform. AngleY="30"/>       

              </TextBlock.RenderTransform>

          </TextBlock>

我们通过设置AngleX和AngleY的值来控制文本的倾斜角度，效果如图：

移动变形可以在水平或垂直方向把文本从原始位置移动到新位置。代码如下：

<Canvas x:Name="LayoutRoot" Background="AliceBlue">

       <!--文本移动-->

          <TextBlock Text="Translated text" FontSize="50" Foreground="Gray">

            <TextBlock.RenderTransform>

                   <TranslateTransform. X="5" Y="5"/>  

              </TextBlock.RenderTransform>

          </TextBlock>

          <!--普通文本-->

       <TextBlock Text="Translated text" FontSize="50"/>

     </Canvas>

设置X和Y的值来表示水平和垂直方向上移动的像素。效果如图：

裁剪可以将文本内容裁剪成我们想要的形状，代码如下：

<StackPanel x:Name="LayoutRoot" Background="AliceBlue" rientation="Horizontal">

          <TextBlock TextWrapping="Wrap" Width="250">

            Nowadays, there usually exists a wide selection of electives for

            college students to choose from. However, students have quite

            different plans for their future so they always end up learning

            courses based on their own ideas.

 

            　　Some students may choose to learn a certain course in order to

            obtain an extra certificate for their job hunting after graduation.

            Because they assume that some more knowledge could ensure more

            chances of winning in finding a good job. Others may have their

            choice made just for fun. They tend to hold the idea that college

            life could be more colorful if they could widen their knowledge

            through elective courses.

 

            　　As far as I’m concerned, I’m inclined to choose electives based on

            both the value of the courses and the interest of my own.

                     <TextBlock.Clip>

                            <EllipseGeometry Center="100,100" RadiusX="100" RadiusY="100"/>

                     </TextBlock.Clip>

          </TextBlock>

          <!--普通文本-->

      <TextBlock TextWrapping="Wrap" Width="250">

            Nowadays, there usually exists a wide selection of electives for

            college students to choose from. However, students have quite

            different plans for their future so they always end up learning

            courses based on their own ideas.

 

            　　Some students may choose to learn a certain course in order to

            obtain an extra certificate for their job hunting after graduation.

            Because they assume that some more knowledge could ensure more

            chances of winning in finding a good job. Others may have their

            choice made just for fun. They tend to hold the idea that college

            life could be more colorful if they could widen their knowledge

            through elective courses.

 

            　　As far as I’m concerned, I’m inclined to choose electives based on

            both the value of the courses and the interest of my own.

                     <TextBlock.Clip>

                            <PathGeometry>

                                   <PathFigure StartPoint="0,200" IsClosed="True">

                                          <PolyLineSegment Points="100,0"/>

                                          <PolyLineSegment Points="200,200"/>

                                   </PathFigure>

                            </PathGeometry>

                     </TextBlock.Clip>

          </TextBlock>

    </StackPanel>

效果如图：