前言:对于可是元素,我们常见有三种变化,旋转、平移、面积

一、  旋转(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的更多相关文章

  1. WPF XAML中 Storyboard.TargetProperty设置TransformGroup指定的变换"RenderTransform.Children

    <Grid x:Name="xx" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransfor ...

  2. 不可视对象的自己主动实例化BUG

    PB有个隐藏BUG会占用内存.影响效率. 先来做个样例吧 (1)创建一个不可视对象n_base,勾选Autolnstantiate属性 初始化事件constructor里面写messagebox('c ...

  3. WinForm和WPF颜色对象的转换

    原文:WinForm和WPF颜色对象的转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/huangli321456/article/details ...

  4. Wpf ImageSource对象与Bitmap对象的互相转换

    原文:Wpf ImageSource对象与Bitmap对象的互相转换 Bitmap to ImageSource 将得到的Bitmap对象转换为wpf常用的Imagesource对象 BitmapSo ...

  5. WPF Window对象

    户通过窗口与 Windows Presentation Foundation (WPF) 独立应用程序进行交互.窗口的主要用途是承载可视化数据并使用户可以与数据进行交互的内容.独立 WPF 应用程序使 ...

  6. WPF可视化控件打印

    Introduction While coding an application that displays a detailed report in a ScrollViewer, it was d ...

  7. AS3游戏中可视对象上限及位图相关的内存消耗实测

    前些天连续做了一些测试,以加深对AS3的掌握和在项目中对 游戏 性能.效率优化方面的一些处理,有很多测试实际意义不大,都不过是证明一些猜想是正确的,除此没有什么. 但前天进行的一系列测试中,有一些对游 ...

  8. WPF依赖对象(DependencyObject) 实现源码,理解WPF原理必读

    /// DependencyObject encompasses all property engine services. It's primary function /// is providin ...

  9. WPF Window对象的生命周期

    WPF中所有窗口的基类型都是System.Windows.Window.Window通常用于SDI(SingleDocumentInterface).MDI(MultipleDocumentInter ...

随机推荐

  1. raw, SOCK_RAW - Linux IPv4 raw socket.

    总 览 #include <sys/socket.h> #include <netinet/in.h> raw_socket = socket(PF_INET, SOCK_RA ...

  2. smbstatus - 报告当前 samba 的联接状态

    总览 smbstatus [-b] [-d] [-L] [-p] [-S] [-s configuration file] [-u username] 描述 此程序是 samba 套件的一部分. sm ...

  3. java 接口概念及使用

    package java11; /* 在任何版本的java中,接口都能定义抽象方法 格式: public abstrace 返回值类型 方法名称(参数列表): 注意事项: 1.接口当中的抽象方法,修饰 ...

  4. angular 组件通信

    单页面应用组件通信有以下几种,这篇文章主要讲 Angular 通信 父组件 => 子组件 子组件 => 父组件 组件A = > 组件B 父组件 => 子组件 子组件 => ...

  5. FORTRAN学习记录

    WHERE statement http://scv.bu.edu/computation/bluegene/IBMdocs/compiler/xlf-10.1/html/xlflr/where.ht ...

  6. 改计算机名导致 Oracle因目标主机或对象不存在

    手贱修改了计算机名, 结果导致登陆oracle数据库报如下错误,一查资料,说是修改了计算机名导致的,需要进到oracle安装目录: \oracle\product\10.2.0\db_1\NETWOR ...

  7. CNN笔记:通俗理解卷积神经网络

    CNN笔记:通俗理解卷积神经网络 2016年07月02日 22:14:50 v_JULY_v 阅读数 250368更多 分类专栏: 30.Machine L & Deep Learning 机 ...

  8. kafka-server.properties

    # Licensed to the Apache Software Foundation (ASF) under one or more # contributor license agreement ...

  9. vue绑定属性、绑定class及绑定style

    1.绑定属性  v-bind 或者 : 例如:<img :src="pic_src" /> <template> <div id="app& ...

  10. CSS定位,转载的

    转自:http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html 层级关系为:<div ——————————— posit ...