变换不是一个好理解的概念,不是吓你,它涉及很多有关代数,几何,以及线性代数的知识。怎么?被我的话吓怕了?不用怕,尽管我们未必能够理解这些概念,只要我们知道怎么使用它们就是了。
其实,变换就是平面上一种坐标变化,听起来很抽象,但,只要我把它说具体了,你就会觉得不抽象了。
相信各位如果玩过Photoshop,或者其它的绘图软件,应该知道什么叫做旋转,什么叫做倾斜,什么叫做平移……
是的,这些就是我们今天要聊的变换,好了,现在你是不是可以坐下来喝一杯珍珠奶茶来放松一下呢?哦,对了,珍珠奶茶尽量少喝哦。

好,闲话少吹,开始今天的表演。

一、TranslateTransform。

这个应该算是最好理解了,就是平移嘛,相信大家不会陌生的,学习解析几何的时候是不是经常玩啊?它无非就两个参数——X和Y,分别是平面上两个方向的位移。

上图中的三个矩形,它们的位置是一样的,但经过平移后,看起来它们好像不在同一个位置了。

  1. <Canvas>
  2. <!-- 三个矩形在Canvas中的位置是相同的,但经过平移变换后,
  3. 看起来,好像并不在同一个位置了。
  4. -->
  5. <Rectangle Width="120" Height="120"
  6. Fill="DarkGreen"
  7. Canvas.ZIndex="0"
  8. Canvas.Top="15"
  9. Canvas.Left="15">
  10. <Rectangle.RenderTransform>
  11. <TranslateTransform X="20" Y="20"/>
  12. </Rectangle.RenderTransform>
  13. </Rectangle>
  14. <Rectangle Width="120" Height="120"
  15. Fill="Yellow"
  16. Canvas.ZIndex="1"
  17. Canvas.Top="15"
  18. Canvas.Left="15">
  19. <Rectangle.RenderTransform>
  20. <TranslateTransform X="80" Y="80"/>
  21. </Rectangle.RenderTransform>
  22. </Rectangle>
  23. <Rectangle Width="120" Height="120"
  24. Fill="Blue"
  25. Canvas.ZIndex="2"
  26. Canvas.Top="15"
  27. Canvas.Left="15">
  28. <Rectangle.RenderTransform>
  29. <TranslateTransform X="140" Y="140"/>
  30. </Rectangle.RenderTransform>
  31. </Rectangle>
  32. </Canvas>

二、RotateTransform。

这个家伙就是用来旋转元素的,Angle属性就是旋转的角度,不用我解释了吧,小学生的知识。另外,有两个属性要注意一下:
CenterX:旋转中心的X坐标,这个坐标是相对于目标的左上角的,例如,你要让一个矩形转旋转,默认的情况,旋转中心就是0,就是矩形的左上角;
CenterY:和上面一样了,只是Y坐标的点。

这两个旋转点不太好把握,如果我们希望比较的相对定位,可以通过UIElement的RenderTransformOrigin属性来改动旋转原点,这个点坐标是相对于元素可视化的边界的,即0到1之间的值,如:
1、左上角:(0,0)
2、左下角:(1,1)
3、顶部居中:(0.5,0)
4、底部居中:(0.5,1)

上图中的三个图象,旋转中心都在底部居中,只是旋转的角度不同而已。

  1. <Grid>
  2. <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.3"
  3. RenderTransformOrigin="0.5,1">
  4. <Image.RenderTransform>
  5. <RotateTransform Angle="-60"/>
  6. </Image.RenderTransform>
  7. </Image>
  8. <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.6"
  9. RenderTransformOrigin="0.5,1">
  10. <Image.RenderTransform>
  11. <RotateTransform Angle="0"/>
  12. </Image.RenderTransform>
  13. </Image>
  14. <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform"
  15. RenderTransformOrigin="0.5,1">
  16. <Image.RenderTransform>
  17. <RotateTransform  Angle="60"/>
  18. </Image.RenderTransform>
  19. </Image>
  20. </Grid>

三、ScaleTransform。

与上面的旋转变换相似,但这个是用于放大和缩小的,它也有一个中心点,就是缩放中心,同样,它的默认值是目标元素的左上角,至于以哪个点为缩放中心,你就自己调整中心坐标了。

上图中为了能清楚看到缩放的效果,后面两个图象都设置透明度。

  1. <Grid>
  2. <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130"
  3. Canvas.ZIndex="0" Opacity="0.09">
  4. <Image.RenderTransform>
  5. <ScaleTransform CenterX="110" CenterY="180" ScaleX="2" ScaleY="2"/>
  6. </Image.RenderTransform>
  7. </Image>
  8. <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130"
  9. Canvas.ZIndex="1" Opacity="0.2">
  10. <Image.RenderTransform>
  11. <ScaleTransform CenterX="120" CenterY="150" ScaleX="1.6" ScaleY="1.6"/>
  12. </Image.RenderTransform>
  13. </Image>
  14. <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130"
  15. Canvas.ZIndex="2"/>
  16. </Grid>

四、SkewTransform。

扭曲变换,可以说是倾斜,它的确实现了倾斜的效果。
同样它也有一个中心点,与上面的相似,AngleX是沿X轴扭曲的角度,AngleY就是沿Y轴扭曲。

  1. <Grid>
  2. <Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center"
  3. VerticalAlignment="Center"
  4. Margin="100"/>
  5. <Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center"
  6. VerticalAlignment="Center"
  7. Margin="100" Opacity="0.3">
  8. <Image.RenderTransform>
  9. <SkewTransform CenterX="0" CenterY="-200" AngleX="30" AngleY="0"/>
  10. </Image.RenderTransform>
  11. </Image>
  12. <Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center"
  13. VerticalAlignment="Center"
  14. Margin="100" Opacity="0.3">
  15. <Image.RenderTransform>
  16. <SkewTransform CenterX="0" CenterY="-550" AngleX="-15" AngleY="0"/>
  17. </Image.RenderTransform>
  18. </Image>
  19. </Grid>

五、TransformGroup。

严格上说,这个不算是一种变换,但它可以实现把N个变换叠加在一起。

  1. <Grid>
  2. <Image Source="/TransFormSample;component/1.jpg"
  3. Stretch="Uniform" Margin="65,98,472,92" />
  4. <Image Source="/TransFormSample;component/1.jpg"
  5. Stretch="Uniform" Margin="65,98,472,92" >
  6. <Image.RenderTransform>
  7. <TransformGroup>
  8. <TranslateTransform X="270" Y="30"/>
  9. <ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="185" CenterY="280"/>
  10. <RotateTransform CenterX="400" CenterY="60" Angle="18"/>
  11. </TransformGroup>
  12. </Image.RenderTransform>
  13. </Image>
  14. </Grid>

六、CompositeTransform。

这与上面的TransformGroup有点像,但你也看到,它不是把多个变换叠加,而是同时应用多种变换方式,但它是有顺序的。
缩放 ->扭曲->旋转->位移

  1. <Grid>
  2. <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Margin="48,68,492,131" />
  3. <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Margin="48,68,492,131"
  4. Opacity="0.5">
  5. <Image.RenderTransform>
  6. <CompositeTransform
  7. CenterX="250" CenterY="185"
  8. Rotation="45"
  9. SkewX="15" SkewY="15"
  10. ScaleX="1.2" ScaleY="1.2"
  11. TranslateX="230" TranslateY="200"/>
  12. </Image.RenderTransform>
  13. </Image>
  14. </Grid>

七、MatrixTrasform。

这是最复杂的一种变换,它是一个3乘3的矩阵,但是,由于它第3列为0,0,1,所以,其实我们只需设置6个值就够了。它们分别是:
 m11       m12     0
 m21       m22     0
 offsetX  offsetY  1
可能是offsetX和offsetY比较容易看出来就是位移,那前面几呢?我们可以猜,默认值为1的就是缩放,因为不可能为0倍,剩下两个就是X轴和Y轴方向的倾斜值了。

其实,我也是通过写代码来找规律的,保持其实参数不变单独改变一个参数来观察图形的变化就能找到答案了。

m11 ——X轴缩放
        m12 ——Y轴上倾斜
        m21 ——X轴上倾斜
        m22——Y轴缩放
        offsetX ——X轴上的位移
        offsetY ——Y轴上的位移

  1. <Grid>
  2. <Image Height="206" HorizontalAlignment="Left" Margin="73,104,0,0" Name="image1" Stretch="Uniform" VerticalAlignment="Top" Width="139" Source="/TransFormSample;component/1.jpg">
  3. <Image.RenderTransform>
  4. <MatrixTransform Matrix="2,0,0,1,12,6"/>
  5. </Image.RenderTransform>
  6. </Image>
  7. <Image Height="206" HorizontalAlignment="Left" Margin="122,424,0,0" Name="image2" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="136" >
  8. <Image.RenderTransform>
  9. <MatrixTransform Matrix="1,-1,0,1,0,137"/>
  10. </Image.RenderTransform>
  11. </Image>
  12. <Image Height="206" HorizontalAlignment="Left" Margin="293,12,0,0" Name="image3" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="139" >
  13. <Image.RenderTransform>
  14. <MatrixTransform Matrix="1,0.6,0,1,0,0"/>
  15. </Image.RenderTransform>
  16. </Image>
  17. <Image Height="206" HorizontalAlignment="Left" Margin="269,424,0,0" Name="image4" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="139" >
  18. <Image.RenderTransform>
  19. <MatrixTransform Matrix="1,1,0,1,0,0"/>
  20. </Image.RenderTransform>
  21. </Image>
  22. </Grid>

如何学习有关变换的知识呢?个人推荐一种方法,很有效,那就是——乱来。
真的,乱来的学习效果很好的,呵呵。

你可以写好代码,然后不断地改变数值,看看有什么变化,多试几次你就会找到规律。

Windows Phone开发(18):变形金刚第九季的更多相关文章

  1. Windows Phone开发(18):变形金刚第九季——变换

    原文:Windows Phone开发(18):变形金刚第九季--变换 变换不是一个好理解的概念,不是吓你,它涉及很多有关代数,几何,以及线性代数的知识.怎么?被我的话吓怕了?不用怕,尽管我们未必能够理 ...

  2. Windows Phone开发人员必看资料

    win phone开发必看资料,下载地址收藏啦!收藏后可有选择性的下载,希望大家喜欢! 完整附件下载:http://down.51cto.com/data/414417 附件预览: Windows E ...

  3. Kinect for Windows SDK开发入门(15):进阶指引 下

    Kinect for Windows SDK开发入门(十五):进阶指引 下 上一篇文章介绍了Kinect for Windows SDK进阶开发需要了解的一些内容,包括影像处理Coding4Fun K ...

  4. Windows Phone开发(46):与Socket有个约会

    原文:Windows Phone开发(46):与Socket有个约会 不知道大家有没有"谈Socket色变"的经历?就像我一位朋友所说的,Socket这家伙啊,不得已而用之.哈,S ...

  5. 如何在Windows下开发Python:在cmd下运行Python脚本+如何使用Python Shell(command line模式和GUI模式)+如何使用Python IDE

    http://www.crifan.com/how_to_do_python_development_under_windows_environment/ 本文目的 希望对于,如何在Windows下, ...

  6. Kinect for Windows SDK开发学习相关资源

    Kinect for Windows SDK(K4W)将Kinect的体感操作带到了平常的应用学习中,提供了一种不同于传统的鼠标,键盘及触摸的无接触的交互方式,在某种程度上实现了自然交互界面的理想,即 ...

  7. Erlang在Windows上开发环境搭建全过程讲解目录

    我会按照下面的列表来一步一步讲解,在windows来开发Erlang所用到的一些工具,和知识.我会不停的添加和修正. Erlang运行时环境 Erlang开发工具选择 Rebar来构建,编译,测试,发 ...

  8. Windows Service 开发,安装与调试

    Visual Studio.net 2010 Windows Service 开发,安装与调试 本示例完成一个每隔一分钟向C:\log.txt文件写入一条记录为例,讲述一个Windows Servic ...

  9. windows原生开发之界面疑云

        windows桌面开发,界面始终是最大的困惑.我们对前端工具的要求,其实只有窗体设计器.消息映射,过分点的话自适应屏幕.模型绑定.能够免于手工书写,其实这个问题并不复杂,但VS不实现.QT语法 ...

随机推荐

  1. JDBC高级特性(一)结果集,批量更新

    一.ResultSet的高级特性 1 可滚动ResultSet 1)向前和向后滚动 滚动特性 在JDBC初期版本号中, ResultSet仅能向前滚动 在JDBC兴许版本号中, ResultSet默认 ...

  2. luogu1040 加分二叉树

    题目大意 设一个n个节点的二叉树tree的中序遍历为(l,2,3,…,n),其中数字1,2,3,…,n为节点编号.每个节点都有一个分数(均为正整数),记第j个节点的分数为di,tree及它的每个子树都 ...

  3. CJOJ1857 -PG图

    Description 背景 LDN不知道为什么特别喜欢PG,也许是某种原因吧…… 有一天,他发明了一个游戏“PG图”. 问题描述 给定一个有向图,每条边都有一个权值. 每次你可以选择一个节点u和一个 ...

  4. 洛谷 P3377 模板左偏树

    题目:https://www.luogu.org/problemnew/show/P3377 左偏树的模板题: 加深了我对空 merge 的理解: 结构体的编号就是原序列的位置. 代码如下: #inc ...

  5. codevs2147数星星(哈希)

    2147 数星星  时间限制: 3 s  空间限制: 64000 KB  题目等级 : 钻石 Diamond   题目描述 Description 小明是一名天文爱好者,他喜欢晚上看星星.这天,他从淘 ...

  6. 4.28 QBXT模拟赛

    NOIP2016提高组模拟赛 ——By wangyurzee7 中文题目名称 迷妹 膜拜 换数游戏 英文题目与子目录名 fans mod game 可执行文件名 fans mod game 输入文件名 ...

  7. php自动加载的两个函数__autoload和__sql_autoload_register

    一.__autoload 这是一个自动加载函数,在PHP5中,当我们实例化一个未定义的类时,就会触发此函数.看下面例子: printit.class.php //文件 <?php class P ...

  8. vue tab 点击请求方法

    页面: <Tabs value="name1" style="width: 100%;height: 900px;" @on-click="ge ...

  9. 题解报告:poj 3233 Matrix Power Series(矩阵快速幂)

    题目链接:http://poj.org/problem?id=3233 Description Given a n × n matrix A and a positive integer k, fin ...

  10. 自定义View(8)关于measure->onMeasur->setMeasuredDimension及getDefaultSize,resolveSizeAndState

    参考: http://www.cnblogs.com/xiaorenwu702/p/5185436.html 当外层容器组件调用其内部的某个组件view1.measure(xxx)时,view1的on ...