WPF中RenderTransform特效XAML详细讲解

最新推荐文章于 2025-03-10 18:46:35 发布

何程龙

最新推荐文章于 2025-03-10 18:46:35 发布

阅读量3.2k

点赞数 3

分类专栏： WPF 文章标签： c# wpf

本文链接：https://blog.csdn.net/qq_44034384/article/details/106175101

版权

WPF 专栏收录该内容

15 篇文章

订阅专栏

前言：关于RenderTransform类中的相关内容，详情请查看本人另一篇博文：WPF特效汇总，教你如何在XAML、CS中书写，建议收藏！

文章目录

一、TranslateTransform(平移变化)

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

<Canvas>
	<Image Width="200" Height="200" Canvas.Top="160" Canvas.Left="140" Source="C:\Users\Administrator\Desktop\cat.jpeg" Opacity="0.5"></Image>
	<Image Width="200" Height="200" Canvas.Top="160" Canvas.Left="140"  Source="C:\Users\Administrator\Desktop\cat.jpeg">
	        <Image.RenderTransform>
	            <TranslateTransform X="20" Y="20"></TranslateTransform>
	        </Image.RenderTransform>
	    </Image>
</Canvas>

在这里插入图片描述

二、 RotateTransform(旋转变化)

包括属性Angle（旋转角度），CenterX、CenterY（旋转的中心）。

<Canvas>
    <Image Width="200" Height="200" Canvas.Top="160" Canvas.Left="140" Source="C:\Users\Administrator\Desktop\cat.jpeg" Opacity="0.5"></Image>
    <Image Width="200" Height="200" Canvas.Top="160" Canvas.Left="140"  Source="C:\Users\Administrator\Desktop\cat.jpeg">
            <Image.RenderTransform>
                <RotateTransform Angle="45" CenterX="0" CenterY="0"></RotateTransform>
            </Image.RenderTransform>
    </Image>
</Canvas>

在这里插入图片描述

三、 ScaleTransform(缩放变化)

包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数，使用CenterX 和 CenterY属性指定一个中心点。

<Canvas>
    <Image Width="200" Height="200" Canvas.Top="160" Canvas.Left="140" Source="C:\Users\Administrator\Desktop\cat.jpeg" Opacity="0.5"></Image>
    <Image Width="200" Height="200" Canvas.Top="160" Canvas.Left="140"  Source="C:\Users\Administrator\Desktop\cat.jpeg">
        <Image.RenderTransform>
            <ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform>
        </Image.RenderTransform>
    </Image>
</Canvas>

在这里插入图片描述

四、SkewTransform(扭曲变化)

包括属性AngleX、AngleY、CenterX、CenterY。其中使用AngleX让元素相对X轴倾斜角度，AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。

<Canvas>
    <Image Width="200" Height="200" Canvas.Top="160" Canvas.Left="140" Source="C:\Users\Administrator\Desktop\cat.jpeg" Opacity="0.5"></Image>
    <Image Width="200" Height="200" Canvas.Top="160" Canvas.Left="140"  Source="C:\Users\Administrator\Desktop\cat.jpeg">
            <Image.RenderTransform>
                <SkewTransform AngleX="30" AngleY="10"></SkewTransform>
            </Image.RenderTransform>
    </Image>
</Canvas>

在这里插入图片描述

五、TransformGroup(合并使用)

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

<Canvas Width="640" Height="480">
    <Rectangle Canvas.Top="20" Canvas.Left="200" Width="200" Height="200" Stroke="Black" StrokeThickness="5">
        <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="C:\Users\Administrator\Desktop\cat.jpeg"></ImageBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

在这里插入图片描述