Silverlight开发历程—RenderTransform特效（TranslateTransform,RotateTransform,ScaleTransform,skewTransform）

概述变形RenderTransform类包含变形成员，专门来更改Silverlight的对象形状，它可以实现拉伸，旋转，扭曲等效果，同时变形通常用来辅助一些动画效果。 TranslateTransform:能够让某些对象的位置发生移位。 RotateTransform:能够让某些对象产生旋转变化，根据中心点进行顺时针或逆时针时行旋转 ScaleTransform：对对象产生缩放变化 SkewTrans

变形Rendertransform类包含变形成员，专门来更改Silverlight的对象形状，它可以实现拉伸，旋转，扭曲等效果，同时变形通常用来辅助一些动画效果。

Translatetransform:能够让某些对象的位置发生移位。

Rotatetransform:能够让某些对象产生旋转变化，根据中心点进行顺时针或逆时针时行旋转

Scaletransform：对对象产生缩放变化

Skewtransform：对对象产生扭曲变化

transformGroup：将某些对象的缩放、扭曲等变化组合起来

Matrixtransform：能够让某对象通过矩阵算法来实现更加复杂的变形

 

Translatetransform（平移变形）

Translatetransform两个属性比较重要X，Y,X，Y分别是相对于对象的起始点偏移的量，如下代码：
XAML：

 <Canvas x:name="LayoutRoot" Background="Black">        <!--声明原Image-->        <Image Source="../images/jiqiren.jpg" Canvas.left="66" Canvas.top="54"></Image>        <!--new Image-->        <Image Source="../images/jiqiren.jpg" Canvas.left="66" Canvas.top="54">            <!--声明Rendertransform 属性-->            <Image.Rendertransform>                <!--使用Translatetransform改变图像的位置-->                <Translatetransform X="50"  Y="50"/>            </Image.Rendertransform>         </Image>    </Canvas>

运行结果：

 

Rotatetransform（旋转变形）

三个属性比较重要  Angle（旋转的角度，正值为顺时针，负值为逆时针） CenterX、CenterY两个属性确定旋转的中心点,如下例子：

<Canvas x:name="LayoutRoot" Background="Black">        <!--声明原Image-->        <Image Source="../images/jiqiren.jpg" Canvas.left="335" Canvas.top="80"></Image>        <!--new Image-->        <Image Source="../images/jiqiren.jpg" Canvas.left="335" Canvas.top="80">            <!--声明Rendertransform 属性-->            <Image.Rendertransform>                <!--使用Rotatetransform旋转对象-->                <Rotatetransform CenterX="25" CenterY="25" Angle="45"  />            </Image.Rendertransform>        </Image>        <Image Source="../images/jiqiren.jpg" Canvas.left="335" Canvas.top="80">            <!--声明Rendertransform 属性-->            <Image.Rendertransform>                <!--使用Rotatetransform旋转对象-->                <Rotatetransform CenterX="25" CenterY="25" Angle="90"  />            </Image.Rendertransform>        </Image>    </Canvas>

运行结果：

 

Scaletransform（缩放变形）

两个属性比较重要 ScaleX和ScaleY ， 分别是产生缩放效果的纵横百分比，最大为1，最小为0，例如，ScaleX=0.5 那么就是缩放原横向坐标的50%，如下例子：

<Canvas x:name="LayoutRoot" Background="Black">        <!--声明原Image-->        <Image Source="../images/jiqiren.jpg" Canvas.left="335" Opacity="0.5" Canvas.top="80"></Image>        <Image Source="../images/jiqiren.jpg" Canvas.left="335" Canvas.top="80">            <Image.Rendertransform>                <!--Scaletransform 更改对象的大小-->                <Scaletransform CenterX="0" CenterY="0" ScaleX="0.7" ScaleY="0.7" />            </Image.Rendertransform>        </Image>    </Canvas>

运行结果：

 

Skewtransform（扭曲变化）

四个属性比较重要  AngleX、AngleY、CenterX、CenterY ， AngleX和AngleY是扭曲对象的倾斜度，CenterX和CenterY是扭曲的中心点，如下例子：

<Canvas x:name="LayoutRoot" Background="Black">        <TextBlock Text="Skewtransform"  FontFamily="Arial Black"   Foreground="White" FontSize="40" Canvas.left="239" Canvas.top="0">        </TextBlock>        <TextBlock Text="Skewtransform"  FontFamily="Arial Black" Opacity="0.5"   Foreground="White" FontSize="40" Canvas.left="232" Canvas.top="33">            <TextBlock.Rendertransform>                <Skewtransform AngleX="35" AngleY="0" />            </TextBlock.Rendertransform>        </TextBlock>        <TextBlock Text="Skewtransform"  FontFamily="Arial Black"   Foreground="White" FontSize="40" Canvas.left="252" Canvas.top="240">        </TextBlock>        <TextBlock Text="Skewtransform"  Opacity="0.5" FontFamily="Arial Black"   Foreground="White" FontSize="40" Canvas.left="262" Canvas.top="156">            <TextBlock.Rendertransform>                <Skewtransform AngleX="-35" AngleY="0" CenterY="-30" />            </TextBlock.Rendertransform>        </TextBlock>        <TextBlock Text="Skewtransform"  FontFamily="Arial Black"   Foreground="White" FontSize="40" Canvas.left="252" Canvas.top="124">        </TextBlock>        <TextBlock Text="Skewtransform"  FontFamily="Arial Black"  Opacity="0.5"  Foreground="White" FontSize="40" Canvas.left="249" Canvas.top="274">              <TextBlock.Rendertransform>                <Skewtransform AngleX="35" AngleY="10"  />            </TextBlock.Rendertransform>        </TextBlock>    </Canvas>

运行结果：

 

 

transformGroup

将多种变形效果组合起来，如下例子：

 <Canvas x:name="LayoutRoot" Background="Black">        <Rectangle WIDth="230" Height="135" RadiusX="2" RadiusY="2" stroke="Red" strokeThickness="2" Canvas.left="260" Canvas.top="59">            <Rectangle.Fill>                <ImageBrush ImageSource="../images/jiqiren.jpg" Stretch="Fill"/>            </Rectangle.Fill>            <Rectangle.Rendertransform>                <!--使用transformGroup 进行组合变形-->                <transformGroup>                    <!--先扭曲变形-->                    <Skewtransform AngleX="35" AngleY="0"/>                    <!--再将对象旋转90度-->                    <Rotatetransform Angle="65"   />                </transformGroup>            </Rectangle.Rendertransform>        </Rectangle>    </Canvas>

运行结果：

总结

以上是内存溢出为你收集整理的Silverlight开发历程—RenderTransform特效（TranslateTransform,RotateTransform,ScaleTransform,skewTransform）全部内容，希望文章能够帮你解决Silverlight开发历程—RenderTransform特效（TranslateTransform,RotateTransform,ScaleTransform,skewTransform）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。