【C#/WPF】Image图片的Transform变换:平移、缩放、旋转
WPF中图像控件Image的变换属性Transform:
- 平移
- 缩放
- 旋转
即要想实现图片的平移、缩放、旋转,是修改它所在的Image控件的Transform变换属性。
下面在XAML中定义了Image图片的Transform属性。
<Image>
<Image.RenderTransform>
<TransformGroup>
<TranslateTransform/>
<ScaleTransform/>
<RotateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
图像平移:
按住鼠标左键,拖拽移动图片;松开鼠标左键,完成图像平移。
MVVM将鼠标事件绑定命令Command后在控制层处理。
private Image movingObject; // 记录当前被拖拽移动的图片
private Point StartPosition; // 本次移动开始时的坐标点位置
private Point EndPosition; // 本次移动结束时的坐标点位置
/// <summary>
/// 按下鼠标左键,准备开始拖动图片
/// </summary>
/// <param name="p"></param>
private void MouseLeftButtonDownCommand(object[] p)
{
object sender = p[0];
MouseButtonEventArgs e = p[1] as MouseButtonEventArgs;
Image img = sender as Image;
movingObject = img;
StartPosition = e.GetPosition(img);
}
/// <summary>
/// 按住鼠标左键,拖动图片平移
/// </summary>
/// <param name="p"></param>
private void MouseMoveCommand(object[] p)
{
object sender = p[0];
MouseEventArgs e = p[1] as MouseEventArgs;
Image img = sender as Image;
if (e.LeftButton == MouseButtonState.Pressed && sender == movingObject)
{
EndPosition = e.GetPosition(img);
TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
TranslateTransform tt = tgnew.Children[0] as TranslateTransform;
var X = EndPosition.X - StartPosition.X;
var Y = EndPosition.Y - StartPosition.Y;
tt.X += X;
tt.Y += Y;
}
// 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
}
}
/// <summary>
/// 鼠标左键弹起,结束图片的拖动
/// </summary>
/// <param name="p"></param>
private void MouseLeftButtonUpCommand(object[] p)
{
object sender = p[0];
MouseButtonEventArgs e = p[1] as MouseButtonEventArgs;
Image img = sender as Image;
movingObject = null;
}
图像缩放:
界面上准备两个按钮,点击分别实现图像的放大和缩小。
/// <summary>
/// 图片放大
/// </summary>
/// <param name="img">被操作的前台Image控件</param>
public void ZoomIn(Image img)
{
TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
ScaleTransform st = tgnew.Children[1] as ScaleTransform;
img.RenderTransformOrigin = new Point(0.5, 0.5);
if (st.ScaleX > 0 && st.ScaleX <= 2.0)
{
st.ScaleX += 0.05;
st.ScaleY += 0.05;
}
else if (st.ScaleX < 0 && st.ScaleX >= -2.0)
{
st.ScaleX -= 0.05;
st.ScaleY += 0.05;
}
}
// 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
}
/// <summary>
/// 图片缩小
/// </summary>
/// <param name="img">被操作的前台Image控件</param>
public void ZoomOut(Image img)
{
TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
ScaleTransform st = tgnew.Children[1] as ScaleTransform;
img.RenderTransformOrigin = new Point(0.5, 0.5);
if (st.ScaleX >= 0.2)
{
st.ScaleX -= 0.05;
st.ScaleY -= 0.05;
}
else if (st.ScaleX <= -0.2)
{
st.ScaleX += 0.05;
st.ScaleY -= 0.05;
}
}
// 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
}
图像旋转:
界面上准备两个按钮,点击分别实现图像的左转和右转。
/// <summary>
/// 图片左转
/// </summary>
/// <param name="img">被操作的前台Image控件</param>
public void RotateLeft(Image img)
{
TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
RotateTransform rt = tgnew.Children[2] as RotateTransform;
img.RenderTransformOrigin = new Point(0.5, 0.5);
rt.Angle -= 5;
}
// 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
}
/// <summary>
/// 图片右转
/// </summary>
/// <param name="img">被操作的前台Image控件</param>
public void RotateRight(Image img)
{
TransformGroup tg = img.RenderTransform as TransformGroup;
var tgnew = tg.CloneCurrentValue();
if (tgnew != null)
{
RotateTransform rt = tgnew.Children[2] as RotateTransform;
img.RenderTransformOrigin = new Point(0.5, 0.5);
rt.Angle += 5;
}
// 重新给图像赋值Transform变换属性
img.RenderTransform = tgnew;
}
【C#/WPF】Image图片的Transform变换:平移、缩放、旋转的更多相关文章
- WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示
原文:WPF/Silverlight中图形的平移,缩放,旋转,倾斜变换演示 为方便描述, 这里仅以正方形来做演示, 其他图形从略. 运行时效果图:XAML代码:// Transform.XAML< ...
- Graphics平移缩放旋转(转载)+点睛
点睛:可以进行多次旋转和平移,也就是平移以后再平移,旋转以后再旋转,有时候一次达不到要求,如果你想一次调整完美的话很麻烦,所以最好多次,上代码 private void btnTranslate_Cl ...
- 图片在 canvas 中的 选中/平移/缩放/旋转,包含了所有canvas的2D变化,让你认识到数学的重要性
1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...
- WPF 触摸屏多点触控图像的缩放旋转和移动
<dxc:DXWindow xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" xmlns:d ...
- WPF中的平移缩放和矩阵变换(TranslateTransform、ScaleTransform、MatrixTransform)
在WPF中的平移缩放都是通过RenderTransform这个类来实现这些效果的,在这个类中,除了平移和缩放还有旋转.扭曲变换.矩阵变换.这些都差不多的,都是坐标的变换. 这里我就先简单弄个平移和缩放 ...
- 好吧,CSS3 3D transform变换,不过如此!
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- 好吧,CSS3 3D transform变换,不过如此!——张鑫旭
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
- Safari 3D transform变换z-index层级渲染异常的研究
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5569 一.Safari是新时代的IE6 在2年前介绍currentColor变量 ...
- 第98天:CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
随机推荐
- 转:完成端口(Completion Port)详解
手把手叫你玩转网络编程系列之三 完成端口(Completion Port)详解 ...
- PHP-表达式
最精确的定义一个表达式的方式就是"任何有值的东西" $a = 5; 1 > 2;等
- java 快速求素数
package test ; import java.util.Scanner ; public class hello { public static void main(String [] arg ...
- 基于 html5 geolocation来获取经纬度地址(copy)
geolocation来获取经纬度地址 以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置,这样获取到的数据和真实数据有很大的偏差.为了获取更加精确的位置,可以使用了html5的geo ...
- 最短路径 - 弗洛伊德(Floyd)算法
为了能讲明白弗洛伊德(Floyd)算法的主要思想,我们先来看最简单的案例.图7-7-12的左图是一个简单的3个顶点的连通网图. 我们先定义两个二维数组D[3][3]和P[3][3], D代表顶点与顶点 ...
- Python 列表 pop() 方法
描述 Python 列表 pop() 方法通过指定元素的索引值来移除列表中的某个元素(默认是最后一个元素),并且返回该元素的值,如果列表为空或者索引值超出范围会报一个异常. 语法 pop() 方法语法 ...
- Python isupper() 方法
描述 Python isupper() 方法检测字符串中所有的字母是否都为大写. 相反的方法:islower() 方法. 语法 isupper() 方法语法: S.isupper() 参数 无. 返回 ...
- Linux使用技巧5--格式化U盘
通常来说,格式化一个分区的U盘还是非常easy的.仅仅须要使用mkfs命令指定目标文件系统就能够了,样例例如以下: $ sudo fdisk -l $ sudo mkfs -t vfat /dev/s ...
- Maven install 报错: Failed to execute goalorg.apache.maven.plugins:maven-gpg-plugin:1.4:sign (sign-art
执行 Maven install 时报错: Failed to execute goalorg.apache.maven.plugins:maven-gpg-plugin:1.4:sign (sign ...
- mac 安装android sdk
1.下载sdk http://www.androiddevtools.cn/ 2.解压下载文件到目标文件夹 tar -xzvf android-sdk_r24.4.1-macosx.zip /User ...