none
Essential Silverlight翻译连载---第六章 续1 RRS feed

  • 常规讨论

  • 下一个变形效果是弯曲,在Silverlight中使用<SkewTransform>元素表现。可以使用水平角度(AngleX)和垂直角度(AngleY)来进行弯曲。您也可以再一次设置CenterX和CenterY来提供变形的中心点。例6-3的代码使用了水平方向45度和垂直方向-30度(和330度效果一样,因为一个圆周为360度)的弯曲。图6-3显示了其效果。

    例6-3 元素弯曲,XAML文件(SkewTransform.xaml)

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

                 Foreground="Black" Text="Silverlight" />

    <Rectangle Canvas.Left="350" Canvas.Top="175"

                 Width="300" Height="150" Stroke="Orange" StrokeThickness="15">

        <Rectangle.RenderTransform>

          <SkewTransform CenterX="50" CenterY="25" AngleX="45" AngleY="-30"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="375" Canvas.Top="215"

                 Foreground="Black" Text="Silverlight">

        <TextBlock.RenderTransform>

          <SkewTransform CenterX="50" CenterY="25" AngleX="45" AngleY="-30"/>

        </TextBlock.RenderTransform>

    </TextBlock>

    </Canvas>



    图6-3 原来元素(左)和弯曲元素(右)

    最后一个“简单”的变形是旋转,在Silverlight中使用<RotateTransform>。您所需做的只是给Angle属性提供旋转的角度(单位为度)。默认情况下,以左上角为圆心进行旋转,也就是相对坐标(0,0)。您可以使用CenterX和CenterY属性来自定义这个旋转点。

    在例6-4中,<Rectangle>元素延点(150,50)旋转45度。使用同样角度旋转<TextBlock>需要注意,对照方块使文本块向右转换25个像素,向下转换40个像素。这些用于补偿旋转点。所以我们从(150-25,50-40)得到(125,10)。如图6-4所示,文本块的位置仍保持在矩形内。

    例6-4 旋转元素,XAML文件(RotateTransform.xaml)

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

                 Foreground="Black" Text="Silverlight" />

    <Rectangle Canvas.Left="350" Canvas.Top="175"

                 Width="300" Height="150" Stroke="Orange" StrokeThickness="15">

        <Rectangle.RenderTransform>

          <RotateTransform Angle="-45" CenterX="150" CenterY="50"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="375" Canvas.Top="215"

                 Foreground="Black" Text="Silverlight">

        <TextBlock.RenderTransform>

          <RotateTransform Angle="-45" CenterX="125" CenterY="10"/>

        </TextBlock.RenderTransform>

    </TextBlock>

    </Canvas>

    图6-4 原来元素(左)和旋转元素(右)

    同一时间使用多种变形时,您不得不将它们做为一组(Silverlight对象模型和XAML语法不允许直接在<Element.RenderTransform>下使用多个变形元素)。但这个限制不会有什么影响,您可以在<Element.RenderTransform>元素内使用<TransformGroup>元素,并把变形对象放在里面。例6-5演示了这种变形。如图6-5所示,例子中的代码仅仅对元素进行转换并弯曲它们(请注意跟前面代码的区别,这里没有为变形对象设置Canvas.Left和Canvas.Top属性)。

    例6-5 组变形,XAML文件(TransformGroup.xaml)

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

                 Foreground="Black" Text="Silverlight" />



    <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15">

        <Rectangle.RenderTransform>

          <TransformGroup>

            <TranslateTransform X="350" Y="175"/>

            <SkewTransform CenterX="425" CenterY="265" AngleX="45" AngleY="-30"/>

          </TransformGroup>

        </Rectangle.RenderTransform>

    </Rectangle>

    <TextBlock FontFamily="Arial" FontSize="56" Foreground="Black"

                 Text="Silverlight">

        <TextBlock.RenderTransform>

          <TransformGroup>

            <TranslateTransform X="375" Y="215"/>

            <SkewTransform CenterX="425" CenterY="265" AngleX="45" AngleY="-30"/>

          </TransformGroup>

        </TextBlock.RenderTransform>

    </TextBlock>

    </Canvas>



    图6-5 原来元素(左)和变形元素(右)

    基于所有Silverlight变形的混合运算可以被进一步通用化。每个点(x,y)乘以a(3×3的矩阵)来计算它的新坐标。因为Silverlight只支持2D,我们不能使用z坐标,所以这个矩阵的第三列永远为(0,0,1)。然而另两列可以用于前面演示的变形。例如,前两行的前两个值用于缩放和弯曲元素;第三行的前两个值用于元素转换。一次设置所有的值就可以把转换、弯曲和缩放变形混合使用。

    这里所讨论的数学问题已经超出了本书的范围,但我们仍要要演示如何在标记中运用它们。您需要使用<MatrixTransform>元素;在它的Matrix属性中需要列出三个矩阵行的前两个值,并使用逗号分隔。依照例6-6的代码描绘出这些值所带来的影响,答案在图6-6中。

    例6-6 使用矩阵变形,XAML文件(MatrixTransform.xaml)

    <Canvas xmlns="http://schemas.microsoft.com/client/2007"

            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="25" Canvas.Top="40"

                 Foreground="Black" Text="Silverlight" />



    <Rectangle Canvas.Left="300"

                 Width="300" Height="150" Stroke="Orange" StrokeThickness="15">

        <Rectangle.RenderTransform>

          <MatrixTransform Matrix="1,1.5,1.25,1.25,1.5,1" />

        </Rectangle.RenderTransform>

    </Rectangle>

    <TextBlock FontFamily="Arial" FontSize="56" Canvas.Left="325"

                 Foreground="Black" Text="Silverlight">

        <TextBlock.RenderTransform>

          <MatrixTransform Matrix="1,1.5,1.25,1.25,1.5,1" />

        </TextBlock.RenderTransform>

    </TextBlock>

    </Canvas>

    图6-6 原来元素(左)和变形元素(右)

    变形

    并非只有UI元素能进行变形。画刷也支持变形,使用<NameOfBrush.Transform>和<NameOfBrush.RelativeTransform>子元素(后面的元素变形使用相对值)。同样,几何元素(用于形状)支持<NameOfGeometry.Transform>子元素并可以运用变形(见第4章)。

    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月11日 8:18
    版主