WPF可视对象变换(RenderTransform)-----RotateTransform、TranslateTransform、ScaleTransform
前言:对于可是元素,我们常见有三种变化,旋转、平移、面积
一、 旋转(RotateTransform)
<RotateTransform CenterX="" CenterY="" Angle=""></RotateTransform>
CenterX和CenterY表示旋转中心,默认为原点及可视元素的左上角,
Angle表示旋转角度
二、平移(TranslateTransform)
<TranslateTransform X="" Y=""></TranslateTransform>
相对于原点移动的位置
三、缩放(ScaleTransform)
<ScaleTransform CenterX="" CenterY="" ScaleX="" ScaleY=""/>
标明旋转中心的位置
四、旋转(斜角SkewTransform)
<SkewTransform CenterX="" CenterY="" AngleX="" AngleY=""/>
表示沿着x轴或者Y轴推斜,常用来模拟3D视觉效果,例如可以通过(五)中的组合实现倾斜的艺术字等
五、变换集合(TransformGroup)
<Ellipse.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="" CenterY="" Angle=""></RotateTransform>
<TranslateTransform X="" Y=""></TranslateTransform>
<ScaleTransform CenterX="" CenterY="" ScaleX="" ScaleY=""/>
</TransformGroup>
</Ellipse.RenderTransform>
内部可以有无数个按顺序进行的变换
六、矩阵变换(MatrixTransform)
本质是其他变形类的底层实现的代码,其他的类都是基于这个类的扩展,以让用户可以更加简单方便的应用,至于MatrixTransform则是通过一种矩阵算法来进行运算得到相应的变形的效果的。
矩阵中第三列的值是固定不变。
原理:
原坐标(x0,y0)通过这个3*3矩阵,通过矩阵乘法可得到坐标 (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.
<!--源码用法-->
<MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"></MatrixTransform>
下面使用MatrixTransform矩阵变换实现以上五种基本的变换效果。

<Canvas Width="1200" Height="300">
<StackPanel Orientation="Horizontal" Canvas.Top="50">
<!-- TranslateTransform 平移 -->
<Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<MatrixTransform Matrix="1 0 0 1 -80 30"></MatrixTransform>
</Image.RenderTransform>
</Image> <!-- RotateTransform 旋转 -->
<Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!-- 90°旋转 -->
<MatrixTransform Matrix="0 1 -1 0 30 0"></MatrixTransform>
</Image.RenderTransform>
</Image> <!-- ScaleTransform 缩放 -->
<Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!--放大1.5倍-->
<MatrixTransform Matrix="1.5 0 0 1.5 -80 0"></MatrixTransform>
</Image.RenderTransform>
</Image> <!-- SkewTransform 扭曲倾斜 -->
<Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!-- x轴倾斜 -->
<MatrixTransform Matrix="1 0 1 1 -80 0"></MatrixTransform>
</Image.RenderTransform>
</Image> <!-- TransformGroup 扭曲、缩放 -->
<Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!-- x轴倾斜 -->
<!--放大1.5倍-->
<MatrixTransform Matrix="1.5 0 1 1.5 -120 0"></MatrixTransform>
</Image.RenderTransform>
</Image>
</StackPanel>
</Canvas>

七、LayoutTransform
- LayoutTransform 属性 是在元素布局的过程中进行变换(布局完成之前)
- RenderTransform 属性 是在元素布局完成之后进行变换(渲染显示之前)
由于LayoutTransform 在布局计算之前进行变换计算,因此如果LayoutTransform 发生了更改,比如动画更改,就会重新引发容器进行布局计算,简单来说LayoutTransform 的每一次变化都需要进行一次重新布局,
而RenderTransform却不会。RenderTransform计算是在布局计算完成之后进行,它不会因此重新布局。因此默认情况下,推荐使用RenderTransform进行变换,只有非常特殊的情况下才会使用LayoutTransform 。
进行了变换之后控件的ActualWidth和ActualHeight属性值是不会改变的。可以理解为只是做了一个变化,并没有实际改变控件的大小。
RenderTransformOrigin 制定了变换原点
有不懂的可以加QQ群:568055323交流哦
WPF可视对象变换(RenderTransform)-----RotateTransform、TranslateTransform、ScaleTransform的更多相关文章
- WPF XAML中 Storyboard.TargetProperty设置TransformGroup指定的变换"RenderTransform.Children
<Grid x:Name="xx" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransfor ...
- 不可视对象的自己主动实例化BUG
PB有个隐藏BUG会占用内存.影响效率. 先来做个样例吧 (1)创建一个不可视对象n_base,勾选Autolnstantiate属性 初始化事件constructor里面写messagebox('c ...
- WinForm和WPF颜色对象的转换
原文:WinForm和WPF颜色对象的转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details ...
- Wpf ImageSource对象与Bitmap对象的互相转换
原文:Wpf ImageSource对象与Bitmap对象的互相转换 Bitmap to ImageSource 将得到的Bitmap对象转换为wpf常用的Imagesource对象 BitmapSo ...
- WPF Window对象
户通过窗口与 Windows Presentation Foundation (WPF) 独立应用程序进行交互.窗口的主要用途是承载可视化数据并使用户可以与数据进行交互的内容.独立 WPF 应用程序使 ...
- WPF可视化控件打印
Introduction While coding an application that displays a detailed report in a ScrollViewer, it was d ...
- AS3游戏中可视对象上限及位图相关的内存消耗实测
前些天连续做了一些测试,以加深对AS3的掌握和在项目中对 游戏 性能.效率优化方面的一些处理,有很多测试实际意义不大,都不过是证明一些猜想是正确的,除此没有什么. 但前天进行的一系列测试中,有一些对游 ...
- WPF依赖对象(DependencyObject) 实现源码,理解WPF原理必读
/// DependencyObject encompasses all property engine services. It's primary function /// is providin ...
- WPF Window对象的生命周期
WPF中所有窗口的基类型都是System.Windows.Window.Window通常用于SDI(SingleDocumentInterface).MDI(MultipleDocumentInter ...
随机推荐
- 十、.NET使用本地Outlook邮箱指定邮箱用户名和密码发送邮件
十..NET使用本地Outlook邮箱指定邮箱用户名和密码发送邮件 1.添加Microsoft.Office.Interop.Outlook引用 2.封装发送邮件方法 using System; us ...
- Word里的红色、绿色和蓝色波浪线
有时候我们写完文章会发现,有的地方有红色波浪线,有的地方有绿色/蓝色二重线,那么这两种线各代表什么意思呢?其实红色波浪线代表此处存在拼写错误,绿色/蓝色波浪线代表此处可能有语法错误.如果你不希望Wor ...
- ElasticSearch(java) 创建索引
搜索]ElasticSearch Java Api(一) -创建索引 标签: elasticsearchapijavaes 2016-06-19 23:25 33925人阅读 评论(30) 收藏 举报 ...
- java object bean 转map
import java.lang.reflect.Field; /** * obj-->map * ConvertObjToMap * 2016年8月17日上午10:53:59 * @param ...
- C#高级编程笔记(17至21章节)线程/任务
17 Visual Studio 2013 控制台用Ctrl+F5可以显示窗口,不用加Console.ReadLine(); F5用于断点调式 程式应该使用发布,因为发布的程序在发布时会进行优化, 2 ...
- spring依赖搜索
spring项目在启动时,spring框架会根据名称自动搜索实现类. 这在日常开发中还是很有用的. 下面举两个例子. 1. 先写一个接口(或者抽象类) public interface IPerson ...
- ceph优化记录 ceph.conf优化详解
https://cloud.tencent.com/developer/article/1173069 记录一下一些ceph优化的设置,部分内容来自网络,有些请根据自己需求相应修改 1. Kerne ...
- OpenCV—Python 轮廓检测 绘出矩形框(findContours\ boundingRect\rectangle
千万注意opencv的轮廓检测和边缘检测是两码事 本文链接:https://blog.csdn.net/wsp_1138886114/article/details/82945328 1 获取轮廓 O ...
- 前端开发本地存储之localStorage和sessionStorage
1.localStorage 概念 HTML5 web 存储:HTML5 提供了两种在客户端存储数据的新方式:localStorage 和 sessionStorage ,两者都是仅在客户端(即浏览器 ...
- AGC033 D~F——[ 值放到角标的DP ][ 思路+DP ][ 思路 ]
地址:https://atcoder.jp/contests/agc033/ D Complexity dp[ i ][ j ][ k ][ l ] 表示左上角是 ( i , j ) .右下角是 ( ...