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

变换不是一个好理解的概念,不是吓你,它涉及很多有关代数,几何,以及线性代数的知识。怎么?被我的话吓怕了?不用怕,尽管我们未必能够理解这些概念,只要我们知道怎么使用它们就是了。

其实,变换就是平面上一种坐标变化,听起来很抽象,但,只要我把它说具体了,你就会觉得不抽象了。

相信各位如果玩过Photoshop,或者其它的绘图软件,应该知道什么叫做旋转,什么叫做倾斜,什么叫做平移……

是的,这些就是我们今天要聊的变换,好了,现在你是不是可以坐下来喝一杯珍珠奶茶来放松一下呢?哦,对了,珍珠奶茶尽量少喝哦。

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

一、TranslateTransform。

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



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

    <Canvas>
<!-- 三个矩形在Canvas中的位置是相同的,但经过平移变换后,
看起来,好像并不在同一个位置了。
-->
<Rectangle Width="120" Height="120"
Fill="DarkGreen"
Canvas.ZIndex="0"
Canvas.Top="15"
Canvas.Left="15">
<Rectangle.RenderTransform>
<TranslateTransform X="20" Y="20"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="120" Height="120"
Fill="Yellow"
Canvas.ZIndex="1"
Canvas.Top="15"
Canvas.Left="15">
<Rectangle.RenderTransform>
<TranslateTransform X="80" Y="80"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="120" Height="120"
Fill="Blue"
Canvas.ZIndex="2"
Canvas.Top="15"
Canvas.Left="15">
<Rectangle.RenderTransform>
<TranslateTransform X="140" Y="140"/>
</Rectangle.RenderTransform>
</Rectangle>
</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)

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

    <Grid>
<Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.3"
RenderTransformOrigin="0.5,1">
<Image.RenderTransform>
<RotateTransform Angle="-60"/>
</Image.RenderTransform>
</Image>
<Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.6"
RenderTransformOrigin="0.5,1">
<Image.RenderTransform>
<RotateTransform Angle="0"/>
</Image.RenderTransform>
</Image>
<Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform"
RenderTransformOrigin="0.5,1">
<Image.RenderTransform>
<RotateTransform Angle="60"/>
</Image.RenderTransform>
</Image>
</Grid>

三、ScaleTransform。

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

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

    <Grid>
<Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130"
Canvas.ZIndex="0" Opacity="0.09">
<Image.RenderTransform>
<ScaleTransform CenterX="110" CenterY="180" ScaleX="2" ScaleY="2"/>
</Image.RenderTransform>
</Image> <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130"
Canvas.ZIndex="1" Opacity="0.2">
<Image.RenderTransform>
<ScaleTransform CenterX="120" CenterY="150" ScaleX="1.6" ScaleY="1.6"/>
</Image.RenderTransform>
</Image> <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130"
Canvas.ZIndex="2"/>
</Grid>

四、SkewTransform。

扭曲变换,可以说是倾斜,它的确实现了倾斜的效果。

同样它也有一个中心点,与上面的相似,AngleX是沿X轴扭曲的角度,AngleY就是沿Y轴扭曲。

    <Grid>
<Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="100"/>
<Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="100" Opacity="0.3">
<Image.RenderTransform>
<SkewTransform CenterX="0" CenterY="-200" AngleX="30" AngleY="0"/>
</Image.RenderTransform>
</Image>
<Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="100" Opacity="0.3">
<Image.RenderTransform>
<SkewTransform CenterX="0" CenterY="-550" AngleX="-15" AngleY="0"/>
</Image.RenderTransform>
</Image> </Grid>

五、TransformGroup。

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

    <Grid>
<Image Source="/TransFormSample;component/1.jpg"
Stretch="Uniform" Margin="65,98,472,92" />
<Image Source="/TransFormSample;component/1.jpg"
Stretch="Uniform" Margin="65,98,472,92" >
<Image.RenderTransform>
<TransformGroup>
<TranslateTransform X="270" Y="30"/>
<ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="185" CenterY="280"/>
<RotateTransform CenterX="400" CenterY="60" Angle="18"/>
</TransformGroup>
</Image.RenderTransform>
</Image> </Grid>

六、CompositeTransform。

这与上面的TransformGroup有点像,但你也看到,它不是把多个变换叠加,而是同时应用多种变换方式,但它是有顺序的。

缩放 ->扭曲->旋转->位移

    <Grid>
<Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Margin="48,68,492,131" />
<Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Margin="48,68,492,131"
Opacity="0.5">
<Image.RenderTransform>
<CompositeTransform
CenterX="250" CenterY="185"
Rotation="45"
SkewX="15" SkewY="15"
ScaleX="1.2" ScaleY="1.2"
TranslateX="230" TranslateY="200"/>
</Image.RenderTransform>
</Image> </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轴上的位移

    <Grid>
<Image Height="206" HorizontalAlignment="Left" Margin="73,104,0,0" Name="image1" Stretch="Uniform" VerticalAlignment="Top" Width="139" Source="/TransFormSample;component/1.jpg">
<Image.RenderTransform>
<MatrixTransform Matrix="2,0,0,1,12,6"/>
</Image.RenderTransform>
</Image>
<Image Height="206" HorizontalAlignment="Left" Margin="122,424,0,0" Name="image2" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="136" >
<Image.RenderTransform>
<MatrixTransform Matrix="1,-1,0,1,0,137"/>
</Image.RenderTransform>
</Image>
<Image Height="206" HorizontalAlignment="Left" Margin="293,12,0,0" Name="image3" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="139" >
<Image.RenderTransform>
<MatrixTransform Matrix="1,0.6,0,1,0,0"/>
</Image.RenderTransform>
</Image>
<Image Height="206" HorizontalAlignment="Left" Margin="269,424,0,0" Name="image4" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="139" >
<Image.RenderTransform>
<MatrixTransform Matrix="1,1,0,1,0,0"/>
</Image.RenderTransform>
</Image>
</Grid>

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

真的,乱来的学习效果很好的,呵呵。

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

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

  1. 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 Phone开发(19):三维透视效果

    原文:Windows Phone开发(19):三维透视效果 三维效果也可以叫透视效果,所以,我干脆叫三维透视效果.理论知识少讲,直接用例开场吧,因为这个三维效果其实很简单,比上一节中的变换更省事,不信 ...

  6. Windows Phone开发(20):当MediaElement和VideoBrush合作的时候

    原文:Windows Phone开发(20):当MediaElement和VideoBrush合作的时候 前面说的那么多控件都是"静态"的,都是"哑吧"的,今天 ...

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

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

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

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

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

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

随机推荐

  1. Shell 传递参数

    Shell 传递参数 向脚本传递参数,格式为:$n. 向脚本传递三个参数,并分别输出: echo "Shell 传递参数实例!"; echo "第一个参数为:$1&quo ...

  2. Linux Shell常用技巧(二) grep

    七. grep家族:       1.  grep退出状态:    0: 表示成功:    1: 表示在所提供的文件无法找到匹配的pattern:    2: 表示参数中提供的文件不存在.    见如 ...

  3. java.lang.NoSuchMethodError: org.springframework.beans.factory.annotation.InjectionMetadata.<init>(L

    关于错误: java.lang.NoSuchMethodError: org.springframework.beans.factory.annotation.InjectionMetadata.&l ...

  4. QT实现不规则窗体

    看到网上有很多不规则窗体的实现,效果很酷.于是使用QT也实现了一个,QT的不规则窗体实现非常简单,只需要设置一个mask(遮掩)图片,这个图片的格式可以使用png或bmp格式,我使用了png格式,默认 ...

  5. 使用VC++压缩解压缩文件夹

    前言   项目中要用到一个压缩解压缩的模块, 看了很多文章和源代码,  都不是很称心, 现在把我自己实现的代码和大家分享. 要求: 1.使用Unicode(支持中文). 2.使用源代码.(不使用静态或 ...

  6. Apache+Django+Mysql环境配置

    环境要求:Apache:2.2  Mysql:5.5 Django:1.5 python:2.7 首先下载mod_wsgi-win32-ap22py27-3.3.so 下载下来后,改名成mod_wsg ...

  7. 慎得慌风 656ik67o

    http://photo.163.com/q/7634581 http://photo.163.com/q/7634580 http://photo.163.com/q/7634577 http:// ...

  8. 一致性哈希算法(consistent hashing)样例+測试。

    一个简单的consistent hashing的样例,非常easy理解. 首先有一个设备类,定义了机器名和ip: public class Cache { public String name; pu ...

  9. ACM-计算几何之Quoit Design——hdu1007 zoj2107

    Quoit Design Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  10. JAVA - 优雅的记录日志(log4j实战篇) (转)

    写在前面 项目开发中,记录错误日志有以下好处: 方便调试 便于发现系统运行过程中的错误 存储业务数据,便于后期分析 在java中,记录日志有很多种方式: 自己实现 自己写类,将日志数据,以io操作方式 ...