Silverlight学习笔记(九)-----RenderTransform特效【五种基本变换】及【矩阵变换MatrixTransform】
来源:互联网 发布:阿里云合作伙伴计划 编辑:程序博客网 时间:2024/06/05 04:32
RenderTransform特效:
变形(RenderTransform)类是为了达到直接去改变某个Silverlight对象的形状(比如缩放、旋转一个元素)的目的而设计的,RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的,它可以实现对元素拉伸,旋转,扭曲等效果,同时变形特效也常用于辅助产生各种动画效果,下面列出RenderTransform类的成员:
l TranslateTransform:能够让某对象的位置发生平移变化。
l RotateTransform:能够让某对象产生旋转变化,根据中心点进行顺时针旋转或逆时针旋转。
l ScaleTransform:能够让某对象产生缩放变化。
l SkewTransform:能够让某对象产生扭曲变化。
l TransformGroup:能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。
l MatrixTransform:能够让某对象通过矩阵算法实现更为复杂的变形。
变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素,变形特效常用于在不改变对象本身构成的情况下,使对象产生变形效果,所以变形元素常辅助产生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>
--------------------------------------------------完美分割线-----------------------------------------------------
先学到这,欢迎各位前辈指点纠错~!
今天开始上课了,纠结。。。
- Silverlight学习笔记(九)-----RenderTransform特效【五种基本变换】及【矩阵变换MatrixTransform】
- Silverlight学习之RenderTransform特效(五种基本变换)及(矩阵变换MatrixTransform)
- RenderTransform特效【五种基本变换】及【矩阵变换MatrixTransform】
- RenderTransform特效【五种基本变换】及【矩阵变换MatrixTransform】
- HTML5 MatrixTransform矩阵变换
- silverlight-RenderTransform特效
- 现代OpenGL+Qt学习笔记之五:OpenGL矩阵变换
- 坐标变换 及矩阵变换
- 几何变换及变换矩阵
- opencv学习笔记(五)重映射及仿射变换
- Silverlight中的5种基本变换
- 矩阵基本变换
- 图形学学习笔记]OpenGL视图矩阵变换
- GDI+学习及代码总结之-----坐标变换、矩阵变换及色彩变换
- GDI+学习及代码总结之-----坐标变换、矩阵变换及色彩变换
- Jquery特效五:图片点击变换特效
- 图形变换之基本矩阵变换
- Silverlight控件使用(四)变换特效
- Java_网络编程2
- Java初学者都必须理解的六大问题
- oracle 日期字段操作
- 集合框架核心接口
- 古典加密(2)
- Silverlight学习笔记(九)-----RenderTransform特效【五种基本变换】及【矩阵变换MatrixTransform】
- struts2默认拦截器(Interceptor)讲解(八)
- SSH开发线路
- 编译生成eboot.bin的问题和boot.bib中RAM入口项注意事项
- sqlite 数据类型 全面
- Java之重载与覆盖
- JAVA中Iterator的具体作用
- 全排列
- 平台迁移安装