博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Silverlight学习笔记(九)-----RenderTransform特效【五种基本变换】及【矩阵变换MatrixTransform】...
阅读量:5105 次
发布时间:2019-06-13

本文共 4046 字,大约阅读时间需要 13 分钟。

RenderTransform特效:

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

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

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

ScaleTransform:能够让某对象产生缩放变化。

SkewTransform:能够让某对象产生扭曲变化。

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

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

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

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

1 
2
3
4
5
6
7 8

          

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

1 
2
3
4
5
6
7 8

          

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

1 
2
3
4
5
6
7 8

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

1 
2
3
4
5
6
7 8

         

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

1 
2
3
4
5
6
7
8
9
10
11
12
13
14
15

          
-----------------------------------------------------
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矩阵变换实现以上五种基本的变换效果。

 

1 
2
3
4
6
8
9
10
11 12 13
14
16
18
19
20
21
22 23 24
25
27
29
30
31
32
33 34 35
36
38
40
41
42
43
44 45 46
47
49
51
52
53
54
55
56 57
58

 

--------------------------------------------------完美分割线-----------------------------------------------------
先学到这,欢迎各位前辈指点纠错~!
今天开始上课了,纠结。。。

转载于:https://www.cnblogs.com/crazypig/archive/2012/02/20/2359599.html

你可能感兴趣的文章
eclipse中写安卓的html页面跳转,菜鸟实现(二) eclipse 安卓 点击TextView 跳转页面...
查看>>
android懒加载简书,Android优化--Fragment懒加载
查看>>
js抓取list中item的html,html - i want add item in list (vue.js) - Stack Overflow
查看>>
mysql格式化html,MySQL FORMAT()用法及代码示例
查看>>
html倒计时动画,js+css3倒计时动画特效
查看>>
html更改信息显示不允许,html静态页如何加个不允许提交空信息验证?
查看>>
多媒体计算机应用 在哪些方面,多媒体计算机应用于初中英语教学的研究:多媒体计算机教学有哪些特点...
查看>>
html嵌入zabbix网页,通过Zabbix通过Python发送HTML和纯文本电子邮件
查看>>
路由 asp.net mvc html,asp.net-mvc – 为什么需要为Html.Action定义的路由?
查看>>
goquery 查找html标签,goquery库的使用
查看>>
bzoj 3473 后缀自动机多字符串的子串处理方法
查看>>
现金销售与欠款销售
查看>>
MongoDb系列
查看>>
【C语言】控制台窗口图形界面编程(七):鼠标事件
查看>>
BZOJ3732 Network
查看>>
DJango中ORM操作
查看>>
Oracle查询优化--单表查询
查看>>
面试常被问到的小程序问题
查看>>
人类的数学抽象思维
查看>>
时序图
查看>>