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

    paint.setAlpha() 即透明度.其取值范围是0---255,数值越小,越透明,颜色上表现越淡. 实际上当设成10以下就会有透明的效果了.

  2. luogu 3415 祭坛

    题目大意: 在平面上,有 n 个水晶柱,每个水晶柱可以用一个点表示 如果 4 个水晶柱依次相连可以构成一个四边形,满足其两条对角线分别平行于 x 轴和 y 轴,并且对角线的交点位于四边形内部(不包括边 ...

  3. 【HDU 4864】 Task

    [题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=4864 [算法] 贪心 不妨将两个数组分别按x从大到小排序 然后枚举每件物品,选择x值大于该物品的且 ...

  4. PCB WebAPI跨域访问 实现方式

    我们写WebAPI不仅自己系统调用,也需要给其它系统调用,那么如何实现跨域访问了,在这里介绍2种方法实现 方法一.修改Web.Config文件   实现 此方法是全局实现跨域,如果仅想某个方法实现跨域 ...

  5. js的45个技巧

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...

  6. CSS样式适配杂记

    1.问:input框的对齐,制作类似百度搜索框的时候,发现IE下前面输入框和后面按钮总是不能对齐. 解答:给input框增加vertical-align:bottom; 2.问:IE下display: ...

  7. [Swift通天遁地]八、媒体与动画-(6)使用开源类库快速实现滑入动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  8. 【Kafka】《Kafka权威指南》——从Kafka读取数据

    应用程序使用 KafkaConsumer向 Kafka 订阅主题,并从订阅的主题上接收消息 . 从 Kafka 读取数据不同于从其他悄息系统读取数据,它涉及一些独特的概念和想法.如果不先理解 这些概念 ...

  9. $P2121 拆地毯$

    \(problem\) \(kruskal\)的模板题. #ifdef Dubug #endif #include <bits/stdc++.h> using namespace std; ...

  10. python自动化测试学习笔记-6urllib模块&request模块

    python3的urllib 模块提供了获取页面的功能. urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, capat ...