windows phone (16) UI变换 下

简介:

 

MatrixTransfrom 矩阵变换,一句标准矩阵表示的变换

TransformGroup 复合变换按照指定顺序将多个变换复合为一个变换

CompositeTransform 组合变换按照固定顺序组合一系列变换

 

 

 表示二维 x-y 平面使用 3x3 矩阵进行自定义变换,上一篇文章中的四个变换类都是基于此得到,MtrixTransForm类是通过矩阵算法运行得到相应的效果


 

 

 



矩阵中第三列的值是固定不变的!



  原理:
  原坐标(x0,y0)通过这个3*3矩阵得到变换之后的新坐标(x1,y1)的过程如下:
 

    [x0,y0] *,通过矩阵乘法可得到坐标 (x0 * M11+x0 * M21,y0 * M12+y0 * M22)之后,再加上 (OffsetX,OffsetY) 即可得到新坐标(x1,y1)。也即是说最终坐标 (x1,y1) : x1 =  x0 * M11 + x0 * M21 + OffsetX , y1 = y0 * M12 + y0 * M22 + OffsetY.

 

1 <!--源码用法--> 
2 
3 <MatrixTransform Matrix= " M11 M12 M21 M22 OffsetX OffsetY "></MatrixTransform>

 示例:

<Grid x:Name= " ContentPanel " Grid.Row= " 1 " Margin= " 12,0,12,0 ">
            <!--<TextBlock x:Name= " tb1 " FontSize= " 72 " HorizontalAlignment= " Center " VerticalAlignment= " Center " Text= " 变换文字示例 "  Foreground= " Cyan "></TextBlock>-->
            <TextBlock x:Name= " tbShow " FontSize= " 72 " VerticalAlignment= " Center " HorizontalAlignment= " Center " Text= " 变换文字示例 "  Foreground= " Cyan ">
                <TextBlock.RenderTransform>
                    <MatrixTransform Matrix= " 0,1,2,1,2,2 "></MatrixTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>

 效果:

 

 总结规律得到

 

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

 部分参考:http://www.cnblogs.com/crazypig/archive/2012/02/20/2359599.html

                 http://www.oschina.net/question/213217_49488

 

表示对变换效果的一种复合,在TransformGroup中可以包含其他的变换,当然也嵌套TransformGroup

 

代码:


 

 

 

 <!--ContentPanel - TransformGroup-->
        <Grid x:Name= " ContentPanel " Grid.Row= " 1 " Margin= " 12,0,12,0 ">
            <TextBlock x:Name= " tbShow " FontSize= " 72 " VerticalAlignment= " Center " HorizontalAlignment= " Center " Text= " 变换文字示例 "  Foreground= " Cyan ">
                <TextBlock.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform  X= " -2 " Y= " 3 "></TranslateTransform>
                        <ScaleTransform ScaleX= " 0.8 " ScaleY= " 0.9 "></ScaleTransform>
                        <RotateTransform Angle= " 23 "></RotateTransform>
                        <TransformGroup>
                            <MatrixTransform Matrix= " 1,0,1,1,0,1 "></MatrixTransform>
                        </TransformGroup>
                    </TransformGroup>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>

 

 这里需要注意的是我们在定义变换的顺序,因为每个变换都是基于上一个变换的基础进行变换,效果:

 

 

 

 是表示对变换的一种组合,并且具有顺序性,所有的变换都是通过属性进行设置的

 

        <!--ContentPanel - CompositeTransform-->
        <Grid x:Name= " ContentPanel " Grid.Row= " 1 " Margin= " 12,0,12,0 ">
            <TextBlock x:Name= " tbShow " FontSize= " 72 " VerticalAlignment= " Center " HorizontalAlignment= " Center " Text= " 变换文字示例 "  Foreground= " Cyan ">
                <TextBlock.RenderTransform>
                    <CompositeTransform Rotation= " 23 " TranslateX= " -2 " TranslateY= " 3 " ScaleX= " 0.8 " ScaleY= " 0.9 " ></CompositeTransform>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>

 

 上面代码中用到属性的意思Rotation表示旋转的角度,TranslateX表示在X轴平移的位置量,TranslateY表示在Y轴平移的位置量,ScaleX表示在X轴缩放的尺寸,ScaleY表示在Y轴缩放的尺寸;

 

 TransformGroup 和CompositeTransfom异同:两者可以设置相同的属性得到相同的效果,在TransformGroup中我们可以使用 TransformGroup进行相同变换的多次使用,但是在CompositeTransfom中使用属性是不允许的,还有就是在 TransformGroup我们可以使用自定义变换MatrixTransfrom,但是在组合变换CompositeTransfom中并没有该属性;两者还需要注意的是顺序性,不同的顺序,实现的效果不同;

 



本文转自shenzhoulong  51CTO博客,原文链接:http://blog.51cto.com/shenzhoulong/840745,如需转载请自行联系原作者

相关文章
|
Web App开发 安全 Linux
Windows 10 大更新:界面更流畅、新 UI、字体商店,还有这些新功能……
Windows 10 大更新:界面更流畅、新 UI、字体商店,还有这些新功能……
|
IDE 程序员 编译器
C#编程学习09:vs2015的windows窗体应用程序创建及英文界面变换为中文界面的方法
C#编程学习09:vs2015的windows窗体应用程序创建及英文界面变换为中文界面的方法
C#编程学习09:vs2015的windows窗体应用程序创建及英文界面变换为中文界面的方法
windows 2019 无UI版的常见问题
windows 2019 无UI版的常见问题
|
UED Windows
Windows 11 发布 6 个月以来 UI / UX 设计仍不一致:媒体喊话微软“先做好基础功能”
Windows 11 发布 6 个月以来 UI / UX 设计仍不一致:媒体喊话微软“先做好基础功能”
106 0
Windows 11 发布 6 个月以来 UI / UX 设计仍不一致:媒体喊话微软“先做好基础功能”
|
编解码 安全 Linux
flutter 在windows和linux上运行IOS UI模拟器
之前发视频总是有人留言,我用的什么模拟器,今天给大家说一下 我一般用的是device_preview这个插件,这个插件的闲置是只能做UI上的模拟,并没有真正的运行环境。 近似您的应用程序在另一台设备上的外观和性能。
350 0
|
Android开发 iOS开发 Windows
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
不久前,随着最后一家WP手机厂商惠普宣布取消今后Windows Phone的研发计划,以及微软官方声明对WP8.1系统今后所有升级维护的终止,WP手机,作为曾经和安卓手机、苹果手机并驾齐驱的三大智能手机之一,正式寿终正寝。
1278 0
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
|
XML 开发框架 前端开发
Windows Phone快速入门需掌握哪些能力
在此之前,先普及下Windows Phone的概念和开发工具的介绍。 Windows Phone是微软公司开发的手机操作系统,它将微软旗下的Xbox Live游戏、Xbox Music音乐与独特的视频体验集成至手机中。2012年6月21日,微软正式发布Windows Phone 8,采用和Windows 8相同的Windows NT内核,同时也针对市场的Windows Phone 7.5发布Windows Phone 7.8。
135 0
Windows Phone快速入门需掌握哪些能力
|
编解码 前端开发 JavaScript
Windows Phone 下开发 LBS 应用
基于位置的服务(Location Based Service,LBS),它是通过电信移动运营商的无线电通讯网络(如GSM网、CDMA网)或外部定位方式(如GPS)获取移动终端用户的位置信息(地理坐标,或大地坐标),在GIS(Geographic Information System,地理信息系统)平台的支持下,为用户提供相应服务的一种增值业务。
164 0
|
移动开发 Android开发 开发者
Windows Phone 8.1 新功能汇总 开发者预览版开放下载
在Build 2014大会上,微软正式发布了传闻已久的Windows Phone 8.1系统,所有的Windows Phone 8手机都可以升级,微软这次可谓是十分厚道。虽然并非迭代升级,但WP 8.1还是拥有很多重大更新,对于微软进一步完善移动平台拥有积极的意义。下面,就一起来了解一下WP 8.1的主要新特性。
234 0
Windows Phone 8.1 新功能汇总 开发者预览版开放下载
|
机器学习/深度学习 人工智能 编解码
一周AI最火论文 | 点点手指变换UI设计风格,斯坦福发布基于计算机视觉的UI设计工具
一周AI最火论文 | 点点手指变换UI设计风格,斯坦福发布基于计算机视觉的UI设计工具
174 0