- A+
所属分类：.NET技术
WPF（Windows Presentation Foundation）是一个用于构建客户端应用程序的图形界面库，它提供了许多对象变形（Object Transformation）的功能。这些功能可以让你轻松地改变对象的大小、位置和角度，以实现各种视觉效果。
以下是一些常用的 WPF 对象变形技术：
-
TranslateTransform：用于平移（移动）对象。你可以使用 TranslateTransform() 构造函数创建一个平移变换对象，并使用 X 和 Y 属性来设置平移的距离。
TranslateTransform translateTransform = new TranslateTransform(10, 20); myRectangle.RenderTransform = translateTransform;
2. ScaleTransform：用于缩放（放大或缩小）对象。你可以使用 ScaleTransform() 构造函数创建一个缩放变换对象，并使用 ScaleX 和 ScaleY 属性来设置缩放的比例。
ScaleTransform scaleTransform = new ScaleTransform(2, 0.5); myRectangle.RenderTransform = scaleTransform;
3. RotateTransform：用于旋转对象。你可以使用 RotateTransform() 构造函数创建一个旋转变换对象，并使用 Angle 属性来设置旋转的角度。
RotateTransform rotateTransform = new RotateTransform(45); myRectangle.RenderTransform = rotateTransform;
4. SkewTransform：用于倾斜（倾斜）对象。你可以使用 SkewTransform() 构造函数创建一个倾斜变换对象，并使用 AngleX 和 AngleY 属性来设置倾斜的角度。
SkewTransform skewTransform = new SkewTransform(30, 60); myRectangle.RenderTransform = skewTransform;
以上只是 WPF 对象变形技术的一部分，还有更多高级的变换可以应用于各种效果，如组合变换、矩阵变换等。
一、RenderTransform特效（变形）
WPF中的变形（RenderTransform）类是为了达到直接去改变某个元素对象的形状的目的而设计的，它可以实现对元素缩放、拉伸，旋转，扭曲等效果，同时变形特效也常用于辅助产生各种动画效果。
RenderTransform类：
该类成员如下：
TranslateTransform：能够让某对象的位置发生平移变化。
RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。
ScaleTransform：能够让某对象产生缩放变化。
SkewTransform：能够让某对象产生扭曲(斜角)变化。
TransformGroup：变换集合,能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用(组合多个变换)。
MatrixTransform：能够让某对象通过矩阵算法实现更为复杂的变形。
通常，对于使用RenderTransform属性比使用LayoutTransform属性更
好，整理的图像变形代码实例，加入很多代码注释
<Grid> <StackPanel> <!--LayoutTransform与RenderTransform的区别，LayoutTransform会影响到所有对象的渲染，但是RenderTransform不会。--> <!--LayoutTransform也会影响位移变形看起来不起作用。--> <!--设置水平位移实例--> <Border Width="100" Height="30"> <Border.Background> <ImageBrush ImageSource="../Resource/Image/test.png"/> </Border.Background> <!--设置布局图形的变形标签--> <Border.RenderTransform> <!--位移变形 水平移动 垂直移动--> <TranslateTransform X="50" Y="10"/> </Border.RenderTransform> </Border> <Border Width="100" Height="30" Background="Orange"/> <!--斜切变形实例--> <Border Width="100" Height="30"> <Border.Background> <ImageBrush ImageSource="../Resource/Image/test.png"/> </Border.Background> <!--设置布局图形的变形标签--> <Border.RenderTransform> <!--斜切变形 水平方向的变化 垂直方向的变化--> <SkewTransform AngleX="20" AngleY="10"/> </Border.RenderTransform> </Border> <!--缩放变形实例--> <Border Width="100" Height="30"> <Border.Background> <ImageBrush ImageSource="../Resource/Image/test.png"/> </Border.Background> <!--设置布局图形的变形标签--> <Border.RenderTransform> <!--缩放变形 缩放的是坐标系 比例值 控制的是平面坐标系--> <!--设置背景图的缩放比例 大于1是放大背景图 小于1的是缩小背景图--> <!--<ScaleTransform ScaleX="0.5" ScaleY="0.5"/>--> <ScaleTransform ScaleX="2" ScaleY="1.5"/> </Border.RenderTransform> </Border> <!--旋转变形实例-设置旋转中心--> <Border Width="100" Height="30"> <Border.Background> <ImageBrush ImageSource="../Resource/Image/test.png"/> </Border.Background> <!--设置布局图形的变形标签--> <Border.RenderTransform> <!--旋转变形 Angle="45"设置旋转角度 CenterX="50"设置旋转中心X轴坐标点 CenterY="15"设置旋转中心Y轴坐标点--> <!--这个坐标点是Border内的坐标点，在Border左上角为起始点开始的--> <RotateTransform Angle="45" CenterX="50" CenterY="15"/> </Border.RenderTransform> </Border> <!--旋转变形实例-设置默认旋转中心--> <Border Width="100" Height="30"> <Border.Background> <ImageBrush ImageSource="../Resource/Image/test.png"/> </Border.Background> <!--设置布局图形的变形标签--> <Border.RenderTransform> <!--如果没有设置RenderTransformOrigin属性，这里是按照控件左上角起始点作为旋转中心--> <RotateTransform Angle="45"/> </Border.RenderTransform> </Border> <!--旋转变形实例-设置按照比例设置旋转中心--> <!--RenderTransformOrigin="0.5 0.5" 旋转中心按照比例方式设置 0.5代表50%--> <Border RenderTransformOrigin="0.5 0.5" Width="100" Height="30"> <Border.Background> <ImageBrush ImageSource="../Resource/Image/test.png"/> </Border.Background> <Border.RenderTransform> <!--旋转45度角--> <RotateTransform Angle="45"/> </Border.RenderTransform> </Border> <!--多种对象变形混合实例--> <Border Width="100" Height="30"> <Border.Background> <ImageBrush ImageSource="../Resource/Image/test.png"/> </Border.Background> <!--设置布局图形的变形标签--> <Border.RenderTransform> <!--对象变形分组 这个分组不同的顺序会产生不同的效果--> <TransformGroup> <!--设置图形对象的缩放比例--> <ScaleTransform ScaleY="0.5"/> <!--设置图形对象的缩放比例--> <RotateTransform Angle="45"/> </TransformGroup> </Border.RenderTransform> </Border> <!--阿里图标SVG--> <Path Data="M936.96 384.512c-6.144-39.424-20.48-77.824-42.496-114.176-23.552-36.352-51.2-62.976-81.92-80.384-84.992-44.032-159.232-30.72-225.28 39.424-18.944 22.016-36.352 46.592-49.664 76.288-13.824 30.208-22.528 58.368-25.088 83.968-0.512 4.096-1.024 8.192-1.024 12.288 0 4.608-1.536 7.168-4.096 7.168-6.144 0-8.704-3.072-11.776-7.168-1.536-4.096-3.072-8.192-4.096-12.288-4.096-14.336-5.632-30.208-4.608-46.08 0-26.624 5.632-49.664 17.408-73.216 27.648-49.664 26.112-95.232-6.144-136.192-29.184-39.424-70.144-55.808-119.808-49.664-40.96 6.144-78.848 20.48-114.176 42.496-37.888 23.552-64.512 49.664-80.384 81.92-44.032 84.992-30.72 160.768 39.424 225.28 22.016 18.944 46.592 36.352 76.288 51.2 17.408 8.192 34.816 14.336 51.712 18.432 15.36 4.096 30.208 6.144 45.056 7.68 4.608 0 7.168 1.536 7.168 6.144 0 4.096-3.072 7.168-7.168 8.704-15.36 5.12-30.208 8.704-45.056 9.728-30.208 2.56-58.88-3.584-85.504-18.432h-1.536c-49.664-27.648-95.232-25.088-136.192 5.632-39.424 30.72-55.808 70.144-48.128 119.808 5.632 39.424 20.48 77.312 42.496 114.176 23.552 37.888 51.2 64.512 83.456 80.384 84.992 45.056 159.232 32.256 223.744-37.888 20.48-20.48 36.864-46.592 51.2-76.288 9.728-20.48 16.896-40.96 21.504-60.416 2.56-12.288 4.608-24.576 5.12-36.352 0-4.096 1.536-7.168 5.632-7.168 4.608 0 7.168 3.072 8.704 7.168 4.096 12.288 7.168 24.576 8.704 36.352 4.608 33.28-1.536 65.024-17.408 95.232-27.648 49.664-25.088 95.232 5.632 136.192 30.72 39.424 70.144 55.808 119.808 49.664 39.424-5.632 77.312-20.48 114.176-42.496 37.888-23.552 64.512-51.2 80.384-81.92 45.568-84.992 32.256-159.232-37.888-225.28-20.48-18.944-46.592-36.352-75.776-51.2-8.192-4.096-16.384-7.168-24.064-10.24-25.088-9.216-49.152-13.824-72.192-15.872-4.608 0-7.168-1.536-7.168-4.608 0-4.608 3.072-8.704 7.168-10.24 18.944-7.168 37.888-10.24 58.368-10.24 4.608 0 9.216 0.512 13.824 0.512 20.992 2.048 39.936 8.704 57.856 18.432 49.664 27.648 95.232 26.624 137.216-5.632 36.352-31.744 52.224-71.168 46.592-120.832z m-72.704 89.6c-14.848 10.752-29.184 16.384-44.032 16.384-14.336 0-30.208-5.12-47.104-14.336l-0.512-0.512c-25.6-13.824-50.688-21.504-76.8-23.04-4.608-0.512-9.216-0.512-13.824-0.512-26.624 0-50.176 4.096-72.704 12.8-4.096 1.536-8.192 3.584-11.776 6.144-13.824 9.216-22.016 25.088-22.016 42.496 0 17.92 9.728 32.768 25.088 39.936 6.144 3.072 13.312 5.12 20.48 5.12 27.136 2.56 51.712 9.216 75.264 19.456 2.048 1.024 4.096 2.048 6.144 2.56 26.112 13.312 49.152 28.672 66.048 44.032 57.344 53.76 66.56 108.032 29.696 176.64-13.312 25.088-35.328 47.104-65.024 65.536-32.768 19.456-65.536 32.256-98.304 36.864-4.608 0.512-9.216 1.024-13.824 1.024-28.16 0-49.152-10.752-68.096-34.816-20.992-28.16-22.016-56.32-2.56-91.136l0.512-0.512c19.456-36.352 27.136-74.752 22.528-114.688-1.536-16.384-5.632-32.768-11.264-49.152-1.536-5.12-4.096-9.728-7.168-13.824-9.216-13.312-24.064-21.504-40.448-21.504-17.408 0-31.744 8.704-39.936 22.528-4.096 7.168-6.656 15.36-6.656 24.576-0.512 12.288-2.56 24.576-6.144 37.888-3.584 13.824-9.216 27.648-15.872 42.496-14.848 29.696-28.672 50.176-43.52 65.024l-1.024 1.536c-31.744 34.304-64 51.2-99.328 51.2-23.04 0-48.128-7.168-75.264-21.504l-1.024-0.512c-26.112-12.8-47.616-34.304-66.56-65.024-19.456-32.768-32.256-66.048-36.864-98.816-5.12-34.816 5.12-59.904 32.768-81.408 14.848-11.264 29.696-16.384 45.056-16.384 14.336 0 29.696 4.608 46.08 13.824l2.56 0.512c28.672 15.36 58.88 23.552 91.136 23.552 4.096 0 8.704 0 12.8-0.512 18.944-1.024 38.4-5.12 57.856-11.776 6.656-2.048 12.288-5.632 17.408-9.728 11.264-9.216 17.92-23.04 17.92-37.888 0-16.384-7.68-30.208-20.48-38.4-7.168-4.608-15.872-7.68-25.6-8.192-16.896-1.536-32.256-4.608-47.616-9.216-11.776-3.584-22.528-7.68-33.792-12.8-23.552-11.776-45.568-26.624-66.56-45.056-56.32-51.712-65.536-107.52-30.208-176.128v-0.512c12.288-24.576 33.28-45.568 65.536-65.536 30.72-19.456 64-31.744 97.792-36.352 4.608-0.512 9.728-1.024 13.824-1.024 28.672 0 50.176 10.752 67.584 34.304l0.512 1.024c21.504 27.648 22.528 54.784 2.56 90.624l-1.024 1.536C452.608 281.088 445.44 310.272 445.44 342.016c-1.024 16.384 0 32.256 3.584 47.616 2.048 9.728 4.608 18.944 8.704 28.16l3.584 7.168c1.536 2.56 3.072 4.608 5.12 6.656 13.312 15.36 29.184 18.944 40.96 18.944 17.408 0 32.256-9.728 39.936-24.576 3.584-6.656 5.12-14.336 5.632-22.528 0.512-4.608 0.512-9.216 1.536-13.824 3.072-20.48 10.24-43.008 21.504-67.584 10.24-22.016 24.064-43.52 43.008-65.536 32.768-34.304 65.536-51.2 101.376-51.2 22.528 0 47.616 6.656 73.728 20.48 25.6 14.848 48.128 36.864 66.56 66.048 19.456 32.256 31.744 65.536 36.864 97.792 2.56 34.816-7.168 60.928-33.28 84.48z" Fill="Orange" Width="100" Height="100" Stretch="Fill" StrokeThickness="2" RenderTransformOrigin="0.5 0.5"> <Path.RenderTransform> <!--对象变形分组 这个分组不同的顺序会产生不同的效果--> <TransformGroup> <!--设置图形对象的缩放比例--> <RotateTransform Angle="90"/> <!--设置图形对象的缩放比例--> <ScaleTransform ScaleY="0.2"/> </TransformGroup> </Path.RenderTransform> </Path> <!--对象变形大杀器 事将上边的对象变形整合在一起的--> <Border Width="100" Height="30" Background="Orange"> <Border.RenderTransform> <!--包含所有变形--> <!--旋转效果可以通过设置斜切实现--> <!--Matrix="1.1,0,0.7,1,10,10"(缩放X 斜切Y 斜切X 缩放Y 位移X 位移Y)--> <MatrixTransform Matrix="1.1,0,0.7,1,10,10"/> </Border.RenderTransform> </Border> </StackPanel> </Grid>
效果图：
