Windows Phone开发:变形金刚第九季—变换

2015-09-30 14:32:15来源:作者:人点击

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

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

一、TranslateTransform。

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

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

<Canvas><!--三个矩形在Canvas中的位置是相同的,但经过平移变换后,看起来,好像并不在同一个位置了。--><RectangleWidth="120"Height="120"Fill="DarkGreen"Canvas.ZIndex="0"Canvas.Top="15"Canvas.Left="15"><Rectangle.RenderTransform><TranslateTransformX="20"Y="20"/></Rectangle.RenderTransform></Rectangle><RectangleWidth="120"Height="120"Fill="Yellow"Canvas.ZIndex="1"Canvas.Top="15"Canvas.Left="15"><Rectangle.RenderTransform><TranslateTransformX="80"Y="80"/></Rectangle.RenderTransform></Rectangle><RectangleWidth="120"Height="120"Fill="Blue"Canvas.ZIndex="2"Canvas.Top="15"Canvas.Left="15"><Rectangle.RenderTransform><TranslateTransformX="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><ImageMargin="289,42,241,143"Source="/TransFormSample;component/1.jpg"Stretch="Uniform"Opacity="0.3"RenderTransformOrigin="0.5,1"><Image.RenderTransform><RotateTransformAngle="-60"/></Image.RenderTransform></Image><ImageMargin="289,42,241,143"Source="/TransFormSample;component/1.jpg"Stretch="Uniform"Opacity="0.6"RenderTransformOrigin="0.5,1"><Image.RenderTransform><RotateTransformAngle="0"/></Image.RenderTransform></Image><ImageMargin="289,42,241,143"Source="/TransFormSample;component/1.jpg"Stretch="Uniform"RenderTransformOrigin="0.5,1"><Image.RenderTransform><RotateTransformAngle="60"/></Image.RenderTransform></Image></Grid>

别走开,下页继续深入介绍

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台