WPF: RenderTransform特效
WPF中的变形(RenderTransform)类是为了达到直接去改变某个Silverlight对象的形状(比如缩放、旋转一个元素)的目的而设计的,RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的,它可以实现对元素拉伸,旋转,扭曲等效果,同时变形特效也常用于辅助产生各种动画效果。
1. RenderTransform类:
该类成员如下:
TranslateTransform:能够让某对象的位置发生平移变化。
RotateTransform:能够让某对象产生旋转变化,根据中心点进行顺时针旋转或逆时针旋转。
ScaleTransform:能够让某对象产生缩放变化。
SkewTransform:能够让某对象产生扭曲变化。
TransformGroup:能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。
MatrixTransform:能够让某对象通过矩阵算法实现更为复杂的变形。
变形元素包括平移变形、旋转变形、缩放变形、扭曲变形、矩阵变形和组合变形元素,变形特效常用于在不改变对象本身构成的情况下,使对象产生变形效果,所以变形元素常辅助产生Silverlight中的各种动画效果。
通常,对于MediaElement元素使用RenderTransform属性比使用LayoutTransform属性更好,因为RenderTransform属性是轻量级的。而且它还可以使用方便的RenderTransformOrigin属性值,从而可以为特定的变换(如旋转)使用相对坐标。
2. TranslateTransform(平移变化):
包含X、Y 两种属性,以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。
<Canvas><Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image><Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg"><Image.RenderTransform><TranslateTransform X="120" Y="120"></TranslateTransform></Image.RenderTransform></Image> </Canvas>
3. RotateTransform(旋转变化):
包括属性Angle(旋转角度),CenterX、CenterY(旋转的中心)
<Canvas><Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image><Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg"><Image.RenderTransform><RotateTransform Angle="45" CenterX="0" CenterY="0"></RotateTransform></Image.RenderTransform></Image> </Canvas>
4. ScaleTransform(缩放变化):
包括属性ScaleX、ScaleY、CenterX、CenterY,其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数,使用CenterX 和 CenterY属性指定一个中心点。
<Canvas><Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image><Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg"><Image.RenderTransform><ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform></Image.RenderTransform></Image> </Canvas>
5. SkewTransform(扭曲变化):
包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度,AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。
<Canvas><Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image><Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg"><Image.RenderTransform><SkewTransform AngleX="30" AngleY="10"></SkewTransform></Image.RenderTransform></Image> </Canvas>
6. TransformGroup:
缩放、旋转、扭曲等变化效果合并起来。以上四种基本变化只是单一的变化,如果想要实现多种效果的叠加,那么就要使用到TransformGroup,否则会报错。TransformGroup的作用类似于在控件布局中的StackPanel内嵌的作用,是把多种变化元素组合成一种变化的容器。
<Canvas Width="640" Height="480"><Rectangle Canvas.Top="20" Canvas.Left="200" Width="400" Height="300" Stroke="Black" StrokeThickness="5"><Rectangle.RenderTransform><TransformGroup><!--RotateTransform 变换--><RotateTransform Angle="10"></RotateTransform><!--SkewTransform变换--><SkewTransform AngleX="-10" AngleY="30" CenterX="20" CenterY="50"></SkewTransform></TransformGroup></Rectangle.RenderTransform><Rectangle.Fill><ImageBrush ImageSource="sun.jpg"></ImageBrush></Rectangle.Fill></Rectangle></Canvas>
7. MatrixTransform矩阵变换:
其实就是其他变形类的底层实现的代码,其他的类都是基于这个类的扩展,以让用户可以更加简单方便的应用,至于MatrixTransform则是通过一种矩阵算法来进行运算得到相应的变形的效果的。
矩阵中第三列的值是固定不变的!
原理:
原坐标(x0,y0)通过这个3*3矩阵,通过矩阵乘法可得到坐标 (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.
<!--源码用法--> <MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"></MatrixTransform>
下面使用MatrixTransform矩阵变换实现以上五种基本的变换效果。
<Canvas Width="1200" Height="300"><StackPanel Orientation="Horizontal" Canvas.Top="50"><!-- TranslateTransform 平移 --><Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"Margin="10" Opacity="0.5"></Image><Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"Margin="10"><Image.RenderTransform><MatrixTransform Matrix="1 0 0 1 -80 30"></MatrixTransform></Image.RenderTransform></Image><!-- RotateTransform 旋转 --><Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"Margin="10" Opacity="0.5"></Image><Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"Margin="10"><Image.RenderTransform><!-- 90°旋转 --><MatrixTransform Matrix="0 1 -1 0 30 0"></MatrixTransform></Image.RenderTransform></Image><!-- ScaleTransform 缩放 --><Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"Margin="10" Opacity="0.5"></Image><Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"Margin="10"><Image.RenderTransform><!--放大1.5倍--><MatrixTransform Matrix="1.5 0 0 1.5 -80 0"></MatrixTransform></Image.RenderTransform></Image><!-- SkewTransform 扭曲倾斜 --><Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"Margin="10" Opacity="0.5"></Image><Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"Margin="10"><Image.RenderTransform><!-- x轴倾斜 --><MatrixTransform Matrix="1 0 1 1 -80 0"></MatrixTransform></Image.RenderTransform></Image><!-- TransformGroup 扭曲、缩放 --><Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"Margin="10" Opacity="0.5"></Image><Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"Margin="10"><Image.RenderTransform><!-- x轴倾斜 --><!--放大1.5倍--><MatrixTransform Matrix="1.5 0 1 1.5 -120 0"></MatrixTransform></Image.RenderTransform></Image></StackPanel></Canvas>
WPF: RenderTransform特效相关推荐
- Silverlight学习笔记(九)-----RenderTransform特效【五种基本变换】及【矩阵变换MatrixTransform】...
RenderTransform特效: 变形(RenderTransform)类是为了达到直接去改变某个Silverlight对象的形状(比如缩放.旋转一个元素)的目的而设计的,RenderTransf ...
- C#WPF XAML 绘图、画笔、特效
C#WPF XAML 绘图.画笔.特效 一.绘图 I.绘图有两种方式:形状绘图和几何绘图. 1.(1).形状(Shape)是一个2D绘图类,位于System.Windows.Shape空间内. 2.包 ...
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(11月28日-12月4日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(11月28日-12月4日) 本周Silverlight学习资源更新 Silverlight HttpUtil 封 ...
- 【荐】牛逼的WPF动画库:XamlFlair
[荐]牛逼的WPF动画库:XamlFlair 原文链接:https://github.com/XamlFlair/XamlFlair 翻译:沙漠尽头的狼(本文未全文翻译,建议阅读原文了解更多) Xam ...
- 2014年5月份第3周51Aspx源码发布详情
HGM简单连连看游戏源码 2014-5-19 [VS2010]源码描述:这是一款基于WinForm窗体程序的简单水果连连看的小游戏.界面比较美观, 功能如下:该游戏可以显示当前关卡,还有剩余时间.重 ...
- 仿迅雷播放器教程 -- C++界面制作方法的对比 (9)
上一个教程对比的5个方向共7个界面框架,都是非常权威,应用很广泛的库,绝对是非常稳定,并且能够做出常见的界面出来,可以放心大胆的 用在项目里 . 但那7个界面框架再好,也总是没有绝对的优势,不然其他框 ...
- WPF自定义控件之列表滑动特效 PowerListBox
列表控件是应用程序中常见的控件之一,对其做一些绚丽的视觉特效,可以让软件增色不少. 本人网上看过一个视频,是windows phone 7系统上的一个App的列表滚动效果,效果非常炫 现在在WPF上用 ...
- 一些WPF中的滤镜特效——Effect Library
原文:一些WPF中的滤镜特效--Effect Library WPF支持类似PhotoShop的滤镜功能,称之为Effect.在.Net 4.0中,WPF就废弃了对BitMapEffect的支持,转向 ...
- WPF特效-拼图游戏
WPF特效-拼图游戏 原文:WPF特效-拼图游戏 此文主要描述我实现碎片化的便捷过程. 步骤1: 选取参考图如下(百度图库搜的): 步骤2: 根据效果图或者模型构建贝塞尔曲线,为了方便查看效果,可以设 ...
最新文章
- 吴恩达 deeplearning.ai 新课上线:TensorFlow 移动和 web 端机器学习
- 阶乘在c语言代码大全,求10000的阶乘(c语言代码实现)
- lsit集合去重复 顶级表达式
- canal应用二:mysql数据实时同步到redis
- 为什么火狐浏览器中点击按钮失效_各种浏览器审查、监听http头工具介绍
- IBM将剥离传统IT基础设施部门;迅雷前CEO陈磊涉嫌职务侵占罪被调查 ;Python 3.9发布|极客头条
- 创建生成级联上级字符的函数
- IntelliJ IDEA 2018.2设置背景图片及透明度
- Python中如何打印空行
- c++中delete和析构函数之间的区别
- 解决PlayerSettings中的splash Image资源发现在内存中卸载不掉
- 4W字全面解读数据中台、数据仓库和数据湖
- MIMO系统如何获得分集增益(1)
- 【机器学习与算法】python手写算法:Kmeans和Kmeans++算法
- 机器学习中的数学——优化技术:参数初始化策略
- Maven介绍,IDEA安装和配置maven和maven指令
- 1123581321递归算法java_【python 2】python 进阶
- 软件测试中自上而下与自下而上的区别
- disable属性导致后台接收值为null解决方法
- 图像增广 || 通过仿射变换实现图像的平移、缩放、旋转、翻转、错切,及MATLAB实现与分析