WPF学习 - 用鼠标移动、缩放、旋转图片（1）
1. 需求
其实我的需求很简单。就是想做一个图片查看器，可以通过鼠标来平移、缩放、旋转图片。
2. 解决思路：
WPF中的UIElement提供了RenderTransform属性，用于承载各种Transform，例如TranslateTransform（平移转换）、ScaleTransform（缩放转换）、RotateTransform（旋转转换）、SkewTransform（倾斜转换）MatrixTransform（矩阵转换）和TransformGroup（组合转换）。因此我们可以用它们来实现需要的功能。
题外话：
实际上，TranslateTransform、ScaleTransform、RotateTransform、SkewTransform等都是预定义好的MatrixTransform。他们的底层逻辑也就是MatrixTransform。而TransformGroup，可以将各种转换打包到一起，同时起作用。
本文的着重点不在介绍这些转换的基本用法，有需要的朋友，可以自行搜索，有非常多的文章介绍基础用法。本文的重点在于，如何用鼠标控制他们。
3. 解决方法
首先，上xaml代码
1 <ContentControl Name="Part_ImageContainer" ClipToBounds="True" <!-- ClipToBounds用于指示当子内容超出边界的时候，是否切除超出部分 --> 2 Cursor="SizeAll" 3 Grid.Row="1" Grid.Column="1" 4 MouseLeftButtonDown="ImgMouseLeftButtonDown" <!-- 鼠标左键用于控制平移 --> 5 MouseRightButtonDown="ImgMouseRightButtonDown" <!-- 鼠标右键用于控制旋转 --> 6 MouseUp="ImgMouseUp" 7 MouseMove="ImgMouseMove" 8 MouseWheel="ImgMouseWheel"> 9 10 <Image Name="Part_Image" 11 RenderOptions.BitmapScalingMode="NearestNeighbor" 12 Source="/ControlViewer/2020_11_26_11_00_29_0.jpg"> 13 <Image.RenderTransform> 14 <TransformGroup x:Name="group"> <!-- 将下面的三种转换组合到一起 --> 15 <ScaleTransform x:Name="scaler"/> 16 <TranslateTransform x:Name="transer"/> 17 <RotateTransform x:Name="rotater"/> 18 </TransformGroup> 19 </Image.RenderTransform> 20 </Image> 21</ContentControl>
3.1 平移：
平移的思路是，当鼠标点按下的时候，记录按下的位置（moveStart），然后鼠标移动。在移动的过程中，记录鼠标点的位置（moveEnd），moveEnd - moveStart的增量，就是平移的量。因此有如下代码：
/// <summary> /// 鼠标是否按下 /// </summary> private bool mouseDown; /// <summary> /// 移动图片前，按下鼠标左键时，鼠标相对于Part_ImageContainer的点 /// </summary> Point moveStart; // 鼠标左键按下 private void ImgMouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Part_ImageContainer.CaptureMouse(); mouseDown = true; moveStart = e.GetPosition(Part_ImageContainer); } // 鼠标移动：有可能是移动图片，也有可能是旋转图片 private void ImgMouseMove(object sender, MouseEventArgs e) { var mouseEnd = e.GetPosition(Part_ImageContainer); // 鼠标移动时，获取鼠标相对Part_ImageContainer的点 if(mouseDown) { if (e.LeftButton == MouseButtonState.Pressed) // 按下鼠标左键，移动图片 { DoMove(mouseEnd); } } } /// <summary> /// 移动图片 /// </summary> /// <param name="moveEndPoint">移动图片的终点（相对于Part_ImageContainer）</param> private void DoMove(Point moveEndPoint) { // 考虑到旋转的影响，因此将两个点转换到Part_Image坐标系，计算x、y的增量 Point start = Part_ImageContainer.TranslatePoint(moveStart, Part_Image); Point end = Part_ImageContainer.TranslatePoint(moveEndPoint, Part_Image); // 判断一下，如果scale很大的时候，移动会很迟缓。此时应该将移动放大 if(scaler.ScaleX > 7) { transer.X += (end.X - start.X) * 4; transer.Y += (end.Y - start.Y) * 4; } else if(scaler.ScaleX > 5) { transer.X += (end.X - start.X) * 3; transer.Y += (end.Y - start.Y) * 3; } else if (scaler.ScaleX > 3) { transer.X += (end.X - start.X) * 2; transer.Y += (end.Y - start.Y) * 2; } else if (scaler.ScaleX < 0.5) { transer.X += (end.X - start.X) * 0.5; transer.Y += (end.Y - start.Y) * 0.5; } else { transer.X += (end.X - start.X); transer.Y += (end.Y - start.Y); } moveStart = moveEndPoint;
// 以下代码，抄的https://blog.csdn.net/weixin_42975610/article/details/113741534
// W+w > 2*move_x > -((2*scale-1)*w + W) 水平平移限制条件 // H+h > 2*move_y > -((2*scale-1)*h + H) 垂直平移限制条件 if (transer.X * 2 > Part_Image.ActualWidth + Part_ImageContainer.ActualWidth - 20) transer.X = (Part_Image.ActualWidth + Part_ImageContainer.ActualWidth - 20) / 2; if (-transer.X * 2 > (2 * scaler.ScaleX - 1) * Part_Image.ActualWidth + Part_ImageContainer.ActualWidth - 20) transer.X = -((scaler.ScaleX - 0.5) * Part_Image.ActualWidth + Part_ImageContainer.ActualWidth / 2 - 10); if (transer.Y * 2 > Part_Image.ActualHeight + Part_ImageContainer.ActualHeight - 20) transer.Y = (Part_Image.ActualHeight + Part_ImageContainer.ActualHeight - 20) / 2; if (-transer.Y * 2 > (2 * scaler.ScaleY - 1) * Part_Image.ActualHeight + Part_ImageContainer.ActualHeight - 20) transer.Y = -((scaler.ScaleY - 0.5) * Part_Image.ActualHeight + Part_ImageContainer.ActualHeight / 2 - 10); }
重要知识点：UIElement.TranslatePoint(Point point, UIElement relativeTo)
这个方法的用途是，将相对于UIElement的点（参数point），转换为相对于relativeTo元素的点。
本例中，moveStart、moveEndPoint都是相对于Part_ImageContainer的点。但是我需要相对于Part_Image的点，因此，就用了Part_ImageContainer.TranslatePoint(moveStart,Part_Image)方法，将点moveStart、moveEndPoint转换为相对于Part_Image的点。
3.2 旋转
我希望，在图片上点击鼠标右键并按住，然后移动鼠标时，就开始旋转图片。那么就需要设置旋转的中心点，已经旋转的角度。我搜遍了很多文章，并没有合适的方法。只能自己摸索了。看如下代码：
Point rotateStart; // 旋转图片前，按下鼠标右键时，鼠标相对于Part_ImageContainer的点 // 鼠标右键按下 private void ImgMouseRightButtonDown(object sender, MouseButtonEventArgs e) { Part_ImageContainer.CaptureMouse(); mouseDown = true; rotateStart = e.GetPosition(Part_ImageContainer); // 需要注意的是：RotateTransfrom的CenterX和CenterY，始终是相对于原始坐标系（未经过变换的坐标系）的。 // 因此，设置CenterX和CenterY之后，需要点拉回到坐标原点
Point toImage = Part_ImageContainer.TranslatePoint(rotateStart, Part_Image);
Point center = group.Transform(toImage); // 将中心点转换到Part_Image现状的坐标系下
transer.X = (center.X - toImage.X * scaler.ScaleX);
transer.Y = (center.Y - toImage.Y * scaler.ScaleY);
rotater.CenterX = center.X;
rotater.CenterY = center.Y;
} // 鼠标移动：有可能是移动图片，也有可能是旋转图片 private void ImgMouseMove(object sender, MouseEventArgs e) { var mouseEnd = e.GetPosition(Part_ImageContainer); // 鼠标移动时，获取鼠标相对图片容器的点 if (e.RightButton == MouseButtonState.Pressed && mouseDown) { double angle = (mouseEnd.Y - rotateStart.Y) * 0.5; // 以y轴的增量作为角度值。并缩小倍数，实现慢一点的旋转 rotate.Angle += angle; rotateStart = mouseEnd; // 将鼠标终点赋值给旋转起点，以实现小角度连续旋转， } }
重要知识点：
3.2.1 Transform.Transform(Point point)方法
这个方法的作用是，将点point使用Transform转换。例如上面的代码中：group.Transform(toImage)，就是将toImage点，用group去进行转换。
3.2.2 Transform.Inverse属性：逆变换，反变换
对于任何Transform对象，一旦使用它去变换某个元素后，它的Inverse属性就会有值。它是GeneralTransform类型，也就是一个变换器，用于将元素变换到原始状态，相当于是Transform的反向操作。
需要注意的是，Inverse是用于返回到原始状态的，而不上一次转换的状态。
难点：
这里最难理解就是旋转中心点。一开始我直接将鼠标点（相对于Part_Image）赋值给CenterX和CenterY，发现图片会“跳”走。后来经过不断的摸索，才发现CenterX和CenterY的值，是相对于元素的原始坐标系的。也就是说，不论这个元素如何变换，CenterX和CenterY都是相对于未经过任何变换时的坐标系的。如下图所示：
（黑色矩形为原始状态，其上有一个点a（2，1）。当以右下角为中心旋转一个角度后，会得到红色的矩形，a点也会跟着旋转到a'。但是a'的坐标还是（2，1）。这是因为，旋转的是矩形的坐标系，而a点相对于坐标系的位置是没有变化的。）
因此，我们就需要将CenterX和CenterY所代表的点，平移到鼠标点上来：
首先：获取到rotateStart的值，这个点是相对于Part_ImageContainer的。
然后：将这个点转换到Part_Image的坐标系中：Point toImage = Part_ImageContainer.TranslatePoint(rotateStart, Part_Image);
此时，toImage点（假设为图中a'点）有两层含义：
1. 它是相对于Part_Image现状坐标系（经过各种变化后的坐标系）的点。也就是上图中a'点。
2. 因为鼠标点击的是这个位置，也就是希望以这个点为中心。如果它是CenterX，CenterY的值，那么它就代表a点（在原始坐标系下）。
这里，我把它当作原始坐标系下。因此使用Transform()方法，将toImage点转换到现状坐标系下：
Point center = group.Transform(toImage);
那么toImage和center就都表示在现状坐标系下的点了。然后计算两个点之间的差值。
这里需要注意：在计算transer.X和transer.Y的时候，toImage点乘以了scaler，也就是相当于把toImage进行了缩放。这是因为center是toImage点经过group变换来的。而group中包含有scaler。如果toImage不乘以scaler，则transer.X和transer.Y会很大，在点下鼠标右键的时候，图片会“跳”到另外一个点上去。
平移和旋转，都用到了MouseMove事件，因此可以将其结合，写成这样：
// 鼠标移动：有可能是移动图片，也有可能是旋转图片 private void ImgMouseMove(object sender, MouseEventArgs e) { var mouseEnd = e.GetPosition(Part_ImageContainer); // 鼠标移动时，获取鼠标相对图片容器的点 if(mouseDown) { if (e.LeftButton == MouseButtonState.Pressed) // 按下鼠标左键，移动图片 { DoMove(mouseEnd); } else if (e.RightButton == MouseButtonState.Pressed) // 按下鼠标右键，旋转图片 { double angle = (mouseEnd.Y - rotateStart.Y) * 0.5; DoRotate(angle); rotateStart = mouseEnd; } } }
3.3 缩放：
我需要的是，以鼠标点为中心，滚动鼠标滚轮，进行放大或缩小。因此有如下代码：
// 鼠标滚轮滚动 private void ImgMouseWheel(object sender, MouseWheelEventArgs e) { var point = e.GetPosition(Part_Image); var delta = e.Delta * 0.002; DoScale(point, delta); } /// <summary> /// 缩放图片。最小为0.1倍，最大为30倍 /// </summary> /// <param name="point">相对于图片的点，以此点为中心缩放</param> /// <param name="delta">缩放的倍数增量</param> private void DoScale( Point point, double delta) { // 限制最大、最小缩放倍数 if (scaler.ScaleX + delta < 0.1 || scaler.ScaleX + delta > 30) return; scaler.ScaleX += delta; scaler.ScaleY += delta; transer.X -= point.X * delta; transer.Y -= point.Y * delta; }
在ImgMouseWheel()方法中，直接获取了相对于Part_Image的点。因为缩放操作，实际上将所有点的坐标，都缩放指定的倍数。例如点（1，1），缩放5倍，就变成了（5，5）。但我要的是鼠标指定的点位不能变，因此就需要将点（5，5）拉回到（1，1）的位置上。于是就需要设置transer.X和transer.Y的值。
总结：
WPF的变换确实效率比较高，相比自己计算图片的移动、缩放、旋转，代码量少很多。指示它的坐标空间不是那么容易理解。
以上是个人学习心得，如有错误，还请指教。
