`
dawuafang
  • 浏览: 1100764 次
文章分类
社区版块
存档分类
最新评论

silverlight-RenderTransform特效

 
阅读更多

变形（RenderTransform）类是为了达到直接去改变某个Silverlight对象的形状（比如缩放、旋转一个元素）的目的而设计的，RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲等效果，同时变形特效也常用于辅助产生各种动画效果，下面列出RenderTransform类的成员：

lTranslateTransform：能够让某对象的位置发生平移变化。

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

lScaleTransform：能够让某对象产生缩放变化。

lSkewTransform：能够让某对象产生扭曲变化。

lTransformGroup：能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。

lMatrixTransform：能够让某对象通过矩阵算法实现更为复杂的变形。

　　变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素，变形特效常用于在不改变对象本身构成的情况下，使对象产生变形效果，所以变形元素常辅助产生Silverlight中的各种动画效果。

　　TranslateTransform(平移变化)：包含X、Y 两种属性，以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。

复制代码
1 <Canvas>
2         <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
3         <Image Canvas.Top="160" Canvas.Left="140"  Source="sun.jpg">
4             <Image.RenderTransform>
5                 <TranslateTransform X="120" Y="120"></TranslateTransform>
6             </Image.RenderTransform>
7         </Image>
8     </Canvas>
复制代码

　　　　　　　　　　

　　RotateTransform(旋转变化):包括属性Angle（旋转角度），CenterX、CenterY（旋转的中心）

复制代码
1 <Canvas>
2         <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
3         <Image Canvas.Top="160" Canvas.Left="140"  Source="sun.jpg">
4             <Image.RenderTransform>
5                 <RotateTransform Angle="45" CenterX="0" CenterY="0"></RotateTransform>
6             </Image.RenderTransform>
7         </Image>
8     </Canvas>
复制代码

　　　　　　　　　　

　　ScaleTransform(缩放变化)：包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数，使用CenterX和CenterY属性指定一个中心点。

复制代码
1 <Canvas>
2         <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
3         <Image Canvas.Top="160" Canvas.Left="140"  Source="sun.jpg">
4             <Image.RenderTransform>
5                 <ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform>
6             </Image.RenderTransform>
7         </Image>
8 </Canvas>
复制代码


　　　　　　　　　　

　　
　　SkewTransform(扭曲变化)：包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度，AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。

复制代码
1 <Canvas>
2         <Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
3         <Image Canvas.Top="160" Canvas.Left="140"  Source="sun.jpg">
4             <Image.RenderTransform>
5                 <SkewTransform AngleX="30" AngleY="10"></SkewTransform>
6             </Image.RenderTransform>
7         </Image>
8     </Canvas>
复制代码

　　　　　　　　　



　　　　TransformGroup：缩放、旋转、扭曲等变化效果合并起来。以上四种基本变化只是单一的变化，如果想要实现多种效果的叠加，那么就要使用到TransformGroup，否则会报错。TransformGroup的作用类似于在控件布局中的StackPanel内嵌的作用，是把多种变化元素组合成一种变化的容器。

复制代码
 1 <Canvas Width="640" Height="480">
 2         <Rectangle Canvas.Top="20" Canvas.Left="200" Width="400" Height="300" Stroke="Black" StrokeThickness="5">
 3             <Rectangle.RenderTransform>
 4                 <TransformGroup>
 5                     <!--RotateTransform 变换-->
 6                     <RotateTransform Angle="10"></RotateTransform>
 7                     <!--SkewTransform变换-->
 8                     <SkewTransform AngleX="-10" AngleY="30" CenterX="20" CenterY="50"></SkewTransform>
 9                 </TransformGroup>
10             </Rectangle.RenderTransform>
11             <Rectangle.Fill>
12                 <ImageBrush ImageSource="sun.jpg"></ImageBrush>
13             </Rectangle.Fill>
14         </Rectangle>
15 </Canvas>
复制代码





　　　　　　　　　　



-----------------------------------------------------MatrixTransform 矩阵变换------------------------------------------

　　
　　MatrixTransform矩阵变换，其实就是其他变形类的底层实现的代码，其他的类都是基于这个类的扩展，以让用户可以更加简单方便的应用，至于MatrixTransform则是通过一种矩阵算法来进行运算得到相应的变形的效果的。矩阵的一些基本算法就不多总结了，以前上课就学过了，网上也有不少讲解。


　　
　　矩阵中第三列的值是固定不变的！



　　原理：
　　原坐标（x0，y0）通过这个3*3矩阵得到变换之后的新坐标（x1，y1）的过程如下：

　　　　[x0,y0] *，通过矩阵乘法可得到坐标 (x0 * M11+x0 * M21,y0 * M12+y0 * M22)之后，再加上 (OffsetX,OffsetY) 即可得到新坐标（x1，y1）。也即是说最终坐标 (x1,y1) :x1 =x0 * M11 + x0 * M21 + OffsetX,y1 = y0 * M12 + y0 * M22 + OffsetY.

1 <!--源码用法--> 
2 
3 <MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"></MatrixTransform>


　　下面使用MatrixTransform矩阵变换实现以上五种基本的变换效果。

复制代码
 1 <Canvas Width="1200" Height="300">
 2         <StackPanel Orientation="Horizontal" Canvas.Top="50">
 3             <!-- TranslateTransform 平移 -->
 4             <Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
 5                    Margin="10" Opacity="0.5"></Image>
 6             <Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
 7                    Margin="10">
 8                 <Image.RenderTransform>
 9                     <MatrixTransform Matrix="1 0 0 1 -80 30"></MatrixTransform>
10                 </Image.RenderTransform>
11             </Image>
12 
13             <!-- RotateTransform 旋转 -->
14             <Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
15                    Margin="10" Opacity="0.5"></Image>
16             <Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
17                    Margin="10">
18                 <Image.RenderTransform>
19                     <!-- 90°旋转 -->
20                     <MatrixTransform Matrix="0 1 -1 0 30 0"></MatrixTransform>
21                 </Image.RenderTransform>
22             </Image>
23 
24             <!-- ScaleTransform 缩放 -->
25             <Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
26                    Margin="10" Opacity="0.5"></Image>
27             <Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
28                    Margin="10">
29                 <Image.RenderTransform>
30                     <!--放大1.5倍-->
31                     <MatrixTransform Matrix="1.5 0 0 1.5 -80 0"></MatrixTransform>
32                 </Image.RenderTransform>
33             </Image>
34 
35             <!-- SkewTransform 扭曲倾斜 -->
36             <Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
37                    Margin="10" Opacity="0.5"></Image>
38             <Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
39                    Margin="10">
40                 <Image.RenderTransform>
41                     <!-- x轴倾斜 -->
42                     <MatrixTransform Matrix="1 0 1 1 -80 0"></MatrixTransform>
43                 </Image.RenderTransform>
44             </Image>
45 
46             <!-- TransformGroup 扭曲、缩放 -->
47             <Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
48                    Margin="10" Opacity="0.5"></Image>
49             <Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
50                    Margin="10">
51                 <Image.RenderTransform>
52                     <!-- x轴倾斜 -->
53                     <!--放大1.5倍-->
54                     <MatrixTransform Matrix="1.5 0 1 1.5 -120 0"></MatrixTransform>
55                 </Image.RenderTransform>
56             </Image>
57         </StackPanel>
58 </Canvas>
复制代码


分享到：
| 项目视频讲解_传播智客OA
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HDI-Silverlight-source-Printing_CS

    (UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"&gt; ,1,0,-1" BorderBrush="#FF4D4D4D" BorderThickness="1" CornerRadius="5,5,5,5" /&gt; ,5,5,5" /&gt; ,5...

    Silverlight2.0功能展示Demo源码

    RenderTransform - 呈现位置的转换（System.Windows.Media.Transform类型） RenderTransformOrigin - 位置转换的中心点 Clip - 容器的剪辑区域（System.Windows.Media.Geometry类型） IsHitTestVisible - 命中测试...

    Silverlight水中倒影效果

    绝对可用，替换下照片路径即可，Siliverlight倒影效果，超炫，

    图片缩放（鼠标缩放，Touch缩放）

    本例中包含鼠标缩放和Touch缩放，都是可以运行的，可以直接复制到项目中去。 贴段代码： ... &lt;Image.RenderTransform&gt; &lt;MatrixTransform&gt;&lt;/MatrixTransform&gt; &lt;/Image.RenderTransform&gt; &lt;/ScrollViewer&gt;

    wpf 后台添加控件（多个）

    最近尝试用wpf在后台动态添加控件，还有个滚动条效果，基本已完成，希望对大家有帮助

    图片平移、旋转和缩放

    根据控件的RenderTransform属性做的图片平移、旋转和缩放，基本都满足

    WPF模拟迅雷界面+360界面【网上整理】

    &lt;Path.RenderTransform&gt; &lt;RotateTransform Angle="-90"/&gt; &lt;/Path.RenderTransform&gt; ,2.25,0,2.75" StrokeThickness="0" HorizontalAlignment="Left" Width="22.25" Fill="{TemplateBinding ...

Magicbox
Global site tag (gtag.js) - Google Analytics