zoukankan      html  css  js  c++  java
  • WPF的图片操作效果(一):RenderTransform

    一.RenderTransform类的成员:

    1.TranslateTransform   平移效果

    2.RotateTransform     旋转效果

    3.ScaleTransform         缩放效果

    4.SkewTransform        扭转效果

    5.TransformGroup    组合效果

    6.MatrixTransform    是其他几个变形类的基类,矩阵方式实现效果

    二.简单效果介绍

    1.TranslateTransform   平移效果

       <Image Source="logo.png" Width="100" Height="100">
                    <Image.RenderTransform>
                        <TranslateTransform X="20" Y="20"/>
                    </Image.RenderTransform>
                </Image>

    注释:X和Y分别代表图片在X方向和Y方向的偏移量

    2.RotateTransform     旋转效果

    <Image Source="logo.png" Width="100" Height="100">
                    <Image.RenderTransform>
                        <RotateTransform Angle="70" CenterX="50" CenterY="100" />
                    </Image.RenderTransform>
                </Image>

    注释:Angle是偏转角度,CenterX和CenterY是中心点,(0,0)是原点,非零值代表经过偏移之后的中心点

    3.ScaleTransform         缩放效果

    <Image Source="logo.png" Width="100" Height="100">
                    <Image.RenderTransform>
                        <ScaleTransform CenterX="10" CenterY="20" ScaleX="0.5" ScaleY="0.5"/>
                    </Image.RenderTransform>
                </Image>

    注释:Center代表原点坐标偏移量,ScaleX和ScaleY分别代表X和Y方向的缩放比例

    4.SkewTransform        扭转效果

    <Image Source="logo.png" Width="100" Height="100">
                    <Image.RenderTransform>
                        <SkewTransform AngleX="30" AngleY="20" CenterX="0" CenterY="0"/>
                    </Image.RenderTransform>
                </Image>

    注释:AngleX和AngleY的方向扭转 CenterX和CenterY是偏移中心点的偏移量

    5.TransformGroup    组合效果

    <Image Source="logo.png" Width="100" Height="100">
                    <Image.RenderTransform>
                        <TransformGroup >
                            <ScaleTransform CenterX="10" CenterY="20" ScaleX="0.5" ScaleY="0.5"/>
                            <RotateTransform Angle="70" CenterX="50" CenterY="50" />
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>

    注释:就是上述简单效果的叠加使用

    6.MatrixTransform    是其他几个变形类的基类,矩阵方式实现效果

    <Image Source="logo.png" Width="100" Height="100">
                    <Image.RenderTransform>
                        <MatrixTransform Matrix="1 0 0 1 80 40"/>
                    </Image.RenderTransform>
                </Image>

     注释:该矩阵效果是通过矩阵计算得出其实际效果,但我不懂,按自己的理解分析出如下:

      Matrix的6个参数是通过矩阵计算得出Image的新坐标和效果,第一个和第四个分别控制该图片的X和Y方向的缩放比例,第二个参数和第三个参数分别控制X和Y方向扭转,最后两个参数代表X和Y方向的平移量

    三.示例下载

  • 相关阅读:
    CS184.1X 计算机图形学导论 作业0
    计算机导论学习(第0单元)
    计算机图形学(第一讲.)
    计算机图形学(第一讲)
    云计算和大数据时代网络技术揭秘(二)云与网的关系
    云计算和大数据时代网络技术揭秘(一)云计算的兴起
    python3练习100题——017
    python3练习100题——016
    python3练习100题——014
    python3练习100题——015
  • 原文地址:https://www.cnblogs.com/Khan-Sadas/p/5083536.html
Copyright © 2011-2022 走看看