WPF 图形转换(旋转,缩放,倾斜,移动,变换组)

已于 2022-02-15 16:55:28 修改
阅读量4.7k 收藏 6
点赞数
分类专栏： WPF 文章标签： wpf microsoft
于 2022-02-15 10:48:18 首次发布
原文链接：https://www.cnblogs.com/cqxfy/p/6117359.html
版权

WPF有五种基本变换，分别是RotateTransform:旋转变换、ScaleTransform：缩放变换、SkewTransform：倾斜变换、TranslateTransform：移动变换、TransformGroup：变换组.

RotateTransform:旋转变换
        使用方法：设置Angle属性为需要转换的角度，设置其中心点为CenterX、CentyY，这个是X、Y轴的二维平面旋转。
        下面我们来看一个Demo实例，可以设置让图标按照某一个角度旋转，其代码如下：

        <!--RotateTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image11"        Stretch="Fill"  Width="50" Source="/SLTrans;component/iPhone_001.png"  Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,50,320,0" Name="image1"        Stretch="Fill"  Width="50" Source="/SLTrans;component/iPhone_001.png" >
            <Image.RenderTransform>
                <RotateTransform CenterX="0" CenterY="0" Angle="45"></RotateTransform>
            </Image.RenderTransform>
        </Image>

 ScaleTransform：缩放变换
        使用方法：使用CenterX 和 CenterY属性指定一个中心点，然后设置ScaleX让对象在X轴进行缩放，设置ScaleY属性让对象在Y轴进行缩放。
        下面我们来看一个Demo实例，可以设置让图标按照某点缩放，其代码如下：

        <!--ScaleTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image21"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png"  Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="91,50,0,0" Name="image2"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png">
            <Image.RenderTransform>
                <ScaleTransform CenterX="0" CenterY="0" ScaleX="0.6" ScaleY="0.6"></ScaleTransform>
            </Image.RenderTransform>
        </Image>

 SkewTransform：倾斜变换
        使用方法：使用AngleX让元素相对X轴倾斜角度，AngleY是让元素围绕Y轴的倾斜角度。同样CenterX和CenterY是中心点位置。
        下面我们来看一个Demo实例，可以设置让图标按照某点倾斜，其代码如下：

        <!--SkewTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image31"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="178,50,0,0" Name="image3"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" >
            <Image.RenderTransform>
                <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0"></SkewTransform>
            </Image.RenderTransform>
        </Image>

TranslateTransform：移动变换
        使用方法：X属性定义元素相对其原来位置偏移的X轴像素量。Y属性也是让元素相对原来位置偏移的Y轴像素量。
        下面我们来看一个Demo实例，可以设置让图标移动变换，其代码如下：

        <!--TranslateTransform变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image41"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,50,0,0" Name="image4"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" >
            <Image.RenderTransform>
                <TranslateTransform X="10" Y="50"></TranslateTransform>
            </Image.RenderTransform>
        </Image>

TransformGroup：变换组
        使用方法：在其内部可以应用多种变换规则，直接在其内添加其他变换方式即可。
        下面我们来看一个Demo实例，可以设置让图标变换多个组，其代码如下：

        <!--TransformGroup变换-->
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image51"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" Opacity=".3"/>
        <Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="378,50,0,0" Name="image5"        Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1"/>
                    <TranslateTransform Y="100"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>

原文地址:https://www.cnblogs.com/cqxfy/p/6117359.html

无熵~
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF经典编程实例/C#/.NET/MVVM/WCF/XAML/WinForm
06-28
本课程通过一个个实战的案例，详细介绍了在WPF编程中用到的各种技巧，帮你进一步掌握WPF这种优秀的编程框架。也许你曾经为了一个WPF又酷又炫的功能，查遍资料却终无所获，最后无奈遗憾放弃。如果你学习了这门课程，要么再回味一下这门课程“曾经赵老师讲过，这样可以实现”，再看看视频，再看看代码，也许再也不留遗憾。如果你是WPF的开发人员、或者是WPF的爱好者，学习这门课，将为你节省大量自我探索的时间成本。
WPF图片预览之移动、旋转、缩放
leebin_20的博客
03-19 3461
RT，这个功能比较常见，但凡涉及到图片预览的都跑不了，在说自己的实现方式前，介绍一个好用的控件：Extended.Toolkit中的Zoombox，感兴趣的同学可以去搜一下这个控件，它封装了常用的预览功能。开始撸代码，整理一下思路先： 首先打算用一个Window来展示图片，但是QQ、微信预览图片的时候，任务栏并没有出现图标，难道用了什么黑科技？不管
WPF 中Canvas图像缩放和平移
最新发布
qq_34552942的博客
06-02 324
图像上放一个图元，同时实现缩放和平移操作 缩放操作：使用滚轮实现缩放，缩放原点以鼠标为中心 平移操作：按住鼠标右键，随鼠标平移 缩放和平移时图元和图像的相对位置不变
WPF中RenderTransform详解
鲤籽鲲的博客
03-23 4463
WPF中RenderTransform详解
WPF 精修篇 旋转 RotateTransForm
时意
12-05 4124
旋转RotateTransform Angle 角度 CenterY ，CenterX 中心点位置 和缩小一样 左侧 和右侧 做了对比 <StackPanel Orientation="Horizontal"> <Image Source="Image/Dog.jpg" Width="200" Height="200"&gt...
WPF Image 旋转图片方法
chulijun3107的博客
04-03 1790
WPF在对图片进行旋转时，可以使用Image.RenderTransform。设置它的初始旋转角度Angle。在旋转照片图像时，还需要设置图片的旋转中心。(CenterX,CenterY)，一般都设置它的宽度一半，高度一半。补充一下图片的位置。自行替换一张图片就可以了。
WPF rotatetransform 中心旋转
m0_51162845的博客
07-08 553
rotatetransform
WPF移动拖动旋转
12-12
在Windows Presentation Foundation（WPF）中，移动、拖动和旋转是常见的图形用户界面（GUI）交互技术，用于实现控件或元素的动态操作。这些功能增强了用户体验，使得应用程序更加直观和用户友好。本篇文章将深入...
WPF实现控件的移动、旋转、拉伸的Demo
09-10
WPF 实现控件的移动 拖放 旋转功能。 实现了控件的自定义旋转、拉伸旋转功能 实现的文档介绍见博客园 一个小Demo主要是配合文档使用的 但不知道博客园中如何传代码 就穿到这了 若觉得对您有帮助可以下下来看看。
WPF Prism MVVM【动态添加控件并可用鼠标、拖动、缩放、旋转】
08-09
本文中所开发的功能是为了给后台目标检测算法做区域标注的一个Demo。为视频中标注电子围栏和框选区域。主要采用了Prism.DryIoc的MVVM方式，用到控件和方法：ItemsControl（控件模板）、Thumb（可拖动控件）、Adorner...
WPF 使用InkCanvas实现画板的缩放以及移动Demo
03-29
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）中使用InkCanvas控件来实现一个可缩放和移动的画板功能。InkCanvas是WPF中用于捕捉和处理用户输入，如鼠标或触摸笔绘制的控件，非常适合创建...
WPF Thumb控件移动缩放
12-09
在Windows Presentation Foundation (WPF) 中，`Thumb`控件是一个非常实用的组件，它可以用于实现用户界面元素的拖动和缩放功能。本篇文章将深入探讨`Thumb`控件的工作原理，以及如何利用它来实现自定义控件的移动和...
WPF 精修篇 动画组TransformGroup
时意
12-05 1859
动画分组 TransformGroup 一个元素可能要有缩放 ScaleTransform和移动 TranslateTransform等多个效果组合 就需要分组 RenderTransformOrigin 中心点设置 "0.5,0.5" 为中间 在编辑器中 有设置 <Grid> <Grid> &lt...
WPF 精修篇 缩放ScaleTransform
时意
12-05 6427
缩放 ScaleTransform 参数 ScaleX X轴缩小值 正常为1 ScaleYY轴缩小值 正常为1 CenterY ，CenterX 中心点位置 设置中心点 会按照中心点位置 缩小 这里 做效果 一个张图片 左侧设置了 缩小 中心点默认为左上角 右侧设置了中心点为 X Y各为100 在缩小 会发生位置变化 2张图片来显示区别 ...
WPF之缩放扭曲与TransformGroup
weixin_44588733的博客
07-27 1541
WPF中，为了达到缩放或者扭曲可以用到RenderTransform这个类，，RenderTransform包含的变形属性成员就是专门用来改变对象形状的，它可以实现对元素缩放或者扭曲等效果 ScaleTransform(缩放变化)： 能够让某对象产生缩放变化，包括属性ScaleX、ScaleY、CenterX、CenterY，其中ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数，使 ...
WPF图片拖拽、移动、缩放
bajiuxiaoqingtian的博客
05-27 2891
WPF图片的拖拽、移动和缩放事件是比较常用的，主要是通过操作前端的TransformGroup实现图片常用事件，回调函数不影响主要功能 前端代码(.xmal / .xaml.cs) // .xaml <UserControl.Resources> <conv:ImageConverter2 x:Key="imageConv"></conv:ImageConverter2> <TransformGroup x:Name="tra
WPF---RenderTransform图形旋转，缩放
qq_43360872的博客
05-14 3504
WPF的RenderTransform类： RotateTransform：能够让某对象产生旋转变化，根据中心点进行顺时针旋转或逆时针旋转。 ScaleTransform：能够让某对象产生缩放变化。 现在用两个 button做例子，分别是旋转和缩放的前台代码，其实都是一样的方法，先设置button的RenderTransform属性，然后建立一个画板，让它实现永久的动画。 下面是一个旋转的例子： ...
WPF: RenderTransform特效
weixin_33853827的博客
03-04 366
WPF中的变形（RenderTransform）类是为了达到直接去改变某个Silverlight对象的形状（比如缩放、旋转一个元素）的目的而设计的，RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的，它可以实现对元素拉伸，旋转，扭曲等效果，同时变形特效也常用于辅助产生各种动画效果。 1. RenderTransform类： 该类成员如下： Tra...
WPF Thumb rectangle移动缩放旋转 mvvmlight
06-08
WPF Thumb和Rectangle都可以用于实现用户界面中的交互功能，例如移动、缩放、旋转等。在使用mvvmlight框架时，可以将Thumb或Rectangle控件与ViewModel绑定，实现更加优雅的MVVM架构。以下是实现移动、缩放、旋转功能的示例代码： 1. 首先，定义一个Thumb或Rectangle控件，并将其与ViewModel绑定： ```xml <Thumb Width="50" Height="50" Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" Canvas.ZIndex="{Binding ZIndex}" RenderTransformOrigin="0.5,0.5" RenderTransform="{Binding Transform}"> <!-- 控件内容 --> </Thumb> <Rectangle Width="50" Height="50" Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" Canvas.ZIndex="{Binding ZIndex}" RenderTransformOrigin="0.5,0.5" RenderTransform="{Binding Transform}"> <!-- 控件内容 --> </Rectangle> ``` 2. 在ViewModel中，定义X、Y、ZIndex、Transform等属性，并在构造函数中初始化： ```csharp public class MyViewModel : ViewModelBase { private double x; public double X { get { return x; } set { Set(ref x, value); } } private double y; public double Y { get { return y; } set { Set(ref y, value); } } private int zIndex; public int ZIndex { get { return zIndex; } set { Set(ref zIndex, value); } } private Transform transform; public Transform Transform { get { return transform; } set { Set(ref transform, value); } } public MyViewModel() { X = 100; Y = 100; ZIndex = 1; Transform = new RotateTransform(0); } } ``` 3. 实现移动功能： ```csharp private Point startPoint; public void OnThumbDragStarted(object sender, DragStartedEventArgs e) { startPoint = e.GetPosition(null); } public void OnThumbDragDelta(object sender, DragDeltaEventArgs e) { double left = X + e.HorizontalChange; double top = Y + e.VerticalChange; X = left; Y = top; } ``` 4. 实现缩放功能： ```csharp public void OnThumbResizeStarted(object sender, DragStartedEventArgs e) { startPoint = e.GetPosition(null); } public void OnThumbResizeDelta(object sender, DragDeltaEventArgs e) { double scaleX = 1 + e.HorizontalChange / Width; double scaleY = 1 + e.VerticalChange / Height; Transform = new ScaleTransform(scaleX * Transform.Value.M11, scaleY * Transform.Value.M22); } ``` 5. 实现旋转功能： ```csharp public void OnThumbRotateStarted(object sender, DragStartedEventArgs e) { startPoint = e.GetPosition(null); } public void OnThumbRotateDelta(object sender, DragDeltaEventArgs e) { Point currentPoint = e.GetPosition(null); Vector vector = startPoint - currentPoint; double angle = Math.Atan2(vector.Y, vector.X) * 180 / Math.PI; Transform = new RotateTransform(angle + Transform.Value.Angle); } ``` 通过以上代码实现Thumb或Rectangle控件的移动、缩放、旋转功能，可以在WPF应用程序中实现更加优雅的用户界面交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值