变换不是一个好理解的概念,不是吓你,它涉及很多有关代数,几何,以及线性代数的知识。怎么?被我的话吓怕了?不用怕,尽管我们未必能够理解这些概念,只要我们知道怎么使用它们就是了。
其实,变换就是平面上一种坐标变化,听起来很抽象,但,只要我把它说具体了,你就会觉得不抽象了。
相信各位如果玩过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. 2015南阳CCPC L - Huatuo's Medicine 签到

    L - Huatuo's Medicine Description Huatuo was a famous doctor. He use identical bottles to carry the ...

  2. 【Codevs1288】埃及分数

    Position: http://codevs.cn/problem/1288/ Description 在古埃及,人们使用单位分数的和(形如1/a的, a是自然数)表示一切有理数. 如:2/3=1/ ...

  3. AD10 库下载地址

    http://wiki.altium.com/display/ADOH/Download+Libraries 最新更新库地址: http://designcontent.live.altium.com ...

  4. Java 日期时间 Date类型,long类型,String类型表现形式的转换 (转)

    Java 日期时间 Date类型,long类型,String类型表现形式的转换 1.java.util.Date类型转换成long类型java.util.Date dt = new Date();Sy ...

  5. Android.mk添加第三方jar包(转载)

    转自:www.cnblogs.com/hopetribe/archive/2012/04/23/2467060.html LOCAL_PATH:= $(call my-dir)include $(CL ...

  6. web安全:防止浏览器记住或自动填写用户名和密码(表单)的终极解决方案

    最近项目上要求做到这一点,在网上搜了一圈,发现都是不完美的,不兼容全部的浏览器,于是只能自己摸索了,最终得出了终极解决方案: 涉及: disabled 或 readonly display:none; ...

  7. $CF1141A Game 23$

    这题很简单啊 可以用\(DFS\)来打 毕竟是 \(2^x*3^y=m 输出x+y啊\) 这是最简单的做法 #include <bits/stdc++.h> using namespace ...

  8. Android内存管理(11)*常见JVM回收机制「Java进程内存堆分代,JVM分代回收内存,三种垃圾回收器」

    参考: http://www.blogjava.net/rosen/archive/2010/05/21/321575.html 1,Java进程内存堆分代: 典型的JVM根据generation(代 ...

  9. js常用操作~~~~将持续更新

    1.替换多个模板变量 var s="my javascript is very poor,who can help me?" var reg=/(\w*)my(.*)is(.*)c ...

  10. DML和DQL语句

    DML操作: a.插入单行数据:      INSERT INTO 表名(列名,列名,...) VALUE(列值,列值,...); 表的字段名是可选的,如果省略,则一次插入所有字段 多个列表和多个值之 ...