RendereTransform 特效

原创已于 2024-12-18 15:02:55 修改 · 307 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#WPF图片变形 #RendereTransform 特效

于 2019-07-01 11:31:19 首次发布

本文深入探讨了WPF中RenderTransform类的运用，包括平移、旋转、缩放、扭曲及复合变形效果，展示了如何通过代码实现元素的动态变化，适用于创建丰富视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：Visual Studio 2017
撰写时间：2019年7月01日
下面给大家讲一个在WPF中的变形（RenderTransform）类是为了达到直接去改变某个Silverlight对象的形状（比如缩放、旋旋转一个元素）的目的而设计的，RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲效果，同时变形特效也常用于辅助产生各种动画效果。下面是RenderTransform类该成员如下图：

成员	名称
TranslateTransform	能够让某对象的位置发生平移变化
RotateTransform	能够让某对象产生旋转变化，根据中心进行顺时针旋转或逆时针旋转
ScaleTransform	能够让某对象产生缩放变化
SkewTransform	能够让某对象产生扭曲变化
TransformGroup	能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用
MatrixTransform	能让某对象通过矩阵算法实现更为复杂的变形
变形元素包括平移变形、扭曲变形、缩放变形、旋转变形、矩阵变形元素，变形特效常用于在改变对象本身构成的情况下，使对象产生变形效果，所以变形元素常辅助产生Silverlight中的各种动画效果；
1、TranslateTransform（平移变化）：

  包含X、Y两种属性，以原来的对象为坐标原点（0,0），然后向X轴、Y轴进行平移变换。见代码：

<!--TranslateTransform平移变化-->
        <!--定义两张图片-->
        <Image Canvas.Top="100" Canvas.Left="60" Source="Images\0001.jpg" Height="150"></Image>
        <Image Canvas.Top="100" Canvas.Left="60" Source="Images\0001.jpg" Height="150"><!--注：Source:图片的来源自定-->
            <!--平移变化-->
            <Image.RenderTransform>
                <TranslateTransform X="50" Y="50"/>
            </Image.RenderTransform>
        </Image>

效果图：
在这里插入图片描述
2、RotateTransform（旋转变化）：
包括属性Angle：旋转角度，CenterX、CenterY：旋转的中心；见代码图：

 <!--RotateTransform旋转变化-->
        <Image Canvas.Top="100" Canvas.Left="150" Source="Images\0001.jpg" Height="100"></Image>
        <Image Canvas.Top="100" Canvas.Left="150" Source="Images\0001.jpg" Height="100"><!--注：Source:图片的来源自定-->
            <Image.RenderTransform>
                <RotateTransform Angle="30" CenterX="0" CenterY="0"></RotateTransform>
            </Image.RenderTransform>
        </Image>

效果图：
在这里插入图片描述
3、Scale Transform（缩放变化）：
包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数，使用CenterX和CenterY属性指定一个中心点。见代码图：

 <!--Scale Transform缩放变化-->
        <Image Canvas.Top="100" Canvas.Left="150" Source="Images\0001.jpg" Height="100"></Image>
        <Image Canvas.Top="100" Canvas.Left="150" Source="Images\0001.jpg" Height="100"><!--注：Source:图片的来源自定-->
            <Image.RenderTransform>
                <ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform>
            </Image.RenderTransform>
        </Image>

效果图：
在这里插入图片描述
4、SkewTransform（扭曲变化）：
包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度，AngleY是让元素围绕Y轴的倾斜角度，同样CenterX和CenterY是中心点的位置。见代码图：

  <!--SkewTransform扭曲变化-->
        <Image Canvas.Top="100" Canvas.Left="100" Source="Images\0001.jpg" Height="150"></Image>
        <Image Canvas.Top="100" Canvas.Left="100" Source="Images\0001.jpg" Height="150"><!--注：Source:图片的来源自定-->
            <Image.RenderTransform>
                <SkewTransform AngleX="20" AngleY="10"></SkewTransform>
            </Image.RenderTransform>
        </Image>

效果图：
在这里插入图片描述
5、TransformGroup（缩放、旋转、扭曲等变化效果合并起来）：
以上四种基本变化只是单一的变化，如果想要实现多种效果的叠加，那么就要使用TransformGroup，否则会报错。TransformGroup的作用类似于在控件布局中的StackPanel内嵌的作用，是把多种变化元素组合成一种变化的容器。见代码图：

<!--TransformGroup扭曲、缩放-->
        <Rectangle Canvas.Top="100" Canvas.Left="150" Width="200" Height="100" Stroke="Black" StrokeThickness="10">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <!--RotateTransform变换-->
                    <RotateTransform Angle="10"></RotateTransform>
                    <!--SkewTransform变换-->
                    <SkewTransform AngleX="-10" AngleY="30" CenterX="20" CenterY="50"></SkewTransform>
                </TransformGroup>
            </Rectangle.RenderTransform>
            <Rectangle.Fill>
                <ImageBrush ImageSource="Images\0001.jpg"></ImageBrush><!--注：Source:图片的来源自定-->
            </Rectangle.Fill>
        </Rectangle>

效果图：
在这里插入图片描述