在WPF中的平移缩放都是通过RenderTransform这个类来实现这些效果的,在这个类中,除了平移和缩放还有旋转、扭曲变换、矩阵变换。这些都差不多的,都是坐标的变换。
这里我就先简单弄个平移和缩放吧:
平移呢就是以原来的对象为坐标原点(0,0),然后向X轴、Y轴进行平移变换。缩放呢有几个属性,ScaleX、ScaleY属性表示对象在X、Y轴进行缩放的倍数,CenterX 和 CenterY属性指定一个中心点。
下面有一个平移和缩放的简单的demo,用鼠标拖图片放进行平移,点击按钮来进行缩放,同时在缩放时让图片回到窗口的*:
<Grid Name="grid">
<Grid.Resources>
<TransformGroup x:Key="trasformView">
<ScaleTransform />
<TranslateTransform />
</TransformGroup>
</Grid.Resources>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" Focusable="False">
<ContentControl MouseLeftButtonDown="OnMouseLeftButtonDown"
MouseLeftButtonUp="OnMouseLeftButtonUp"
MouseMove="OnMouseMove">
<Image Name="Image1" Source="Images/Picture.jpg" Stretch="Uniform"
RenderTransform="{StaticResource trasformView}" />
</ContentControl>
</ScrollViewer>
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Button Content="放大" Click="Button_Click_1" />
<Button Content="缩小" Click="Button_Click_2" />
</StackPanel>
</Grid>
分别处理MouseDown/Move/Up来达到移动,通过点击按钮然后控制ScaleX、ScaleY,CenterX 和 CenterY来放大缩小倍数和控制中心点:
private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e) {
var image = sender as ContentControl;
if (image == null) {
return;
}
image.CaptureMouse();
ismouseLeftButtonDown = true;
this.mousePoint = e.GetPosition(image);
} private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e) {
var image = sender as ContentControl;
if (image == null) {
return;
}
image.ReleaseMouseCapture();
ismouseLeftButtonDown = false;
} private void OnMouseMove(object sender, MouseEventArgs e) {
var image = sender as ContentControl;
if (image == null) {
return;
}
if (ismouseLeftButtonDown) {
ImageMove(image, e.GetPosition(image));
}
} private void ImageMove(ContentControl image, Point point) {
var group = grid.FindResource("trasformView") as TransformGroup;
var translateTransform = group.Children[] as TranslateTransform;
translateTransform.X += point.X - mousePoint.X;
translateTransform.Y += point.Y - mousePoint.Y;
mousePoint = point; sumx = translateTransform.X;
sumy = translateTransform.Y;
}
private void ScalingAndtranslation(string str) {
var group = grid.FindResource("trasformView") as TransformGroup;
var scaleTransform = group.Children[] as ScaleTransform;
var translateTransform = group.Children[] as TranslateTransform; var mainWindowPoint = new Point(window.ActualWidth / , window.ActualHeight / );
var imagePoint = new Point(Image1.ActualWidth / , Image1.ActualHeight / ); scaleTransform.CenterX = imagePoint.X;
scaleTransform.CenterY = imagePoint.Y; if (str == "amplify") {
scaleTransform.ScaleX += 0.2;
scaleTransform.ScaleY += 0.2;
} else if (str == "reduce" && scaleTransform.ScaleX > 0.1) {
scaleTransform.ScaleX -= 0.2;
scaleTransform.ScaleY -= 0.2;
} if (translateTransform.X != || translateTransform.Y != ) {
translateTransform.X = translateTransform.X - sumx;
translateTransform.Y = translateTransform.Y - sumy;
}
}
上面是用了TranslateTransform、ScaleTransform,还有一个MatrixTransform,这个是其他变换的底层的实现,是通过矩阵的运算来得到的。可以更加灵活的运动变换。
这个可以仔细的学习一下:
<MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"></MatrixTransform>
可以看到上面这个,Matrix里面的是什么意思呢,首先看简单的[OffsetX OffsetY]这两个。这两个是跟平移有关,很简单,就是一个简单的矩阵的加减法,比如[1,1]+[1,0]=[2,1]。这个就表示(1,1)这个点在X轴上平移一个单位可以到(2,1)。同理:[1,1]+[0,1]=[1,2]。这个就是在Y轴上平移一个单位。
然后来看缩放:
这个矩阵的乘法表示(1,2)这个点通过乘一个矩阵后变为(3,8),X轴变为原来3倍,Y轴变为4倍。
然后呢这个中间乘的矩阵就是上面M11和M22。就可以控制缩放的倍数。
同样的,剩下的两个就是用来控制旋转的啦。
所以,就可以通过几个矩阵的结合来一次性的旋转、平移、缩放等等操作。上面都是2*2的矩阵,其实有3*3的矩阵的,就是本人数学较烂。就找个图贴贴总结下吧。
最终坐标:即是说最终坐标 (x1,y1) : x1 = x0 * M11 + x0 * M21 + OffsetX , y1 = y0 * M12 + y0 * M22 + OffsetY.
好了,这样MatrixTransform 就可以进行使用了。例子还没写=-= 以后补充吧。
先把上面那个简单的平移缩放的DEMO放着:NO1
WPF中的平移缩放和矩阵变换(TranslateTransform、ScaleTransform、MatrixTransform)的更多相关文章
-
OpenGL中旋转平移缩放等变换的顺序对模型的影响
l 前提: 0x01. 假设绘制顶点的语句为Draw Array,变换的语句(旋转.平移.缩放)为M,而 M0; M1; M2; Draw Array; 则称对Array先进行M2再进行M1.M0 0 ...
-
WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示
原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图:XAML代码:// Transform.XAML< ...
-
二维图形的矩阵变换(三)——在WPF中的应用矩阵变换
原文:二维图形的矩阵变换(三)--在WPF中的应用矩阵变换 UIElement和RenderTransform 首先,我们来看看什么样的对象可以进行变换.在WPF中,用于呈现给用户的对象的基类为Vis ...
-
二维图形的矩阵变换(二)——WPF中的矩阵变换基础
原文:二维图形的矩阵变换(二)--WPF中的矩阵变换基础 在前文二维图形的矩阵变换(一)——基本概念中已经介绍过二维图像矩阵变换的一些基础知识,本文中主要介绍一下如何在WPF中进行矩阵变换. Matr ...
-
WPF 中Canvas图形移动、缩放代码
从Flash转C#,很多内容一知半解,边摸索边前进,代码粗糙,权当留个脚印. 只是想得到一个基础的移动和缩放功能的界面,找了很久都是画线.画矩形等基础形状的代码,移动和缩放说的并不清晰,只能自己努力来 ...
-
在WPF中的Canvas上实现控件的拖动、缩放
如题,项目中需要实现使用鼠标拖动.缩放一个矩形框,WPF中没有现成的,那就自己造一个*:) 造*前先看看Windows自带的画图工具中是怎样做的,如下图: 在被拖动的矩形框四周有9个小框,可以从不 ...
-
WPF中的MatrixTransform
原文:WPF中的MatrixTransform WPF中的MatrixTransform ...
-
MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件
原文 MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件 UI 前沿技术 WPF 中的多点触控操作事件 Charles Petzold 下载代码示例 就在过去几年,多点触控还只是科幻电 ...
-
WPF中的三维空间(2)
原文:WPF中的三维空间(2) 2.10.3 三维对象操作 1.在二维平面空间移动.缩放.旋转Viewport3D控件对象 图2-196 选中Viewport3D控件对象 图 ...
随机推荐
-
vi 常用命令
1.关于退出 :wq! ----强制保存退出 :wq ---- 保存退出 ZZ ---- 作用和:wq一样,(注意Z是大写的,并且不是在命令模式) :q ---- 退出 :q! --- 强 ...
-
2016暑假多校联合---Rikka with Sequence (线段树)
2016暑假多校联合---Rikka with Sequence (线段树) Problem Description As we know, Rikka is poor at math. Yuta i ...
-
[deviceone开发]-数据绑定示例
一.简介 这个示例详细介绍了do平台数据bind的灵活使用方式.所有UI组件都支持binddata的方式,可以绑定到do_HashData,do_ListData对象.初学者推荐. 二.效果图 三.相 ...
-
HTTP协议学习---(十二)理解转发与重定向
解释一 转发是服务器行为,重定向是客户端行为.为什么这样说呢,这就要看两个动作的工作流程: 转发过程:客户浏览器发送http请求---->web服务器接受此请求-->调用内部的一个方法在容 ...
-
liunx之:top命令解释
top命令经常用来监控linux的系统状况,比如cpu.内存的使用,程序员基本都知道这个命令,但比较奇怪的是能用好它的人却很少,例如top监控视图中内存数值的含义就有不少的曲解. 本文通过一个运行中的 ...
-
三、Java基础---------关于继承、构造函数、静态代码块执行顺序示例讲解
在上节博客中曾提到过类的继承,这篇文章主要是介绍类的继承.构造函数以及静态代码块的执行顺序. 首先接着分析在黑马基础测试中的一个关于继承的题目,题目描述如下: 声明类Person,包含2个成员变量:n ...
-
NOIP 2013 提高组 day2 积木大赛
积木大赛 描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为 n 的大厦,大厦可以看成由 n 块宽度为1的积木组成,第
-
http://www.cutt.com/
简网APP工场-服务介绍 服务介绍
-
CCF201812-3	CIDR合并
按题意模拟即可...主要CCF吞代码... #include<bits/stdc++.h> #define pb push_back #define mp make_pair #defin ...
-
google Kickstart Round G 2017 三道题题解
A题:给定A,N,P,计算A的N!次幂对P取模的结果. 数据范围: T次测试,1 ≤ T ≤ 100 1<=A,N,P<=105 快速幂一下就好了.O(nlogn). AC代码: #inc ...