[UWP]如何实现UWP平台最佳图片裁剪控件
前几天我写了一个UWP图片裁剪控件ImageCropper（开源地址），自认为算是现阶段UWP社区里最好用的图片裁剪控件了，今天就来分享下我编码的过程。
为什么又要造轮子
因为开发需要，我们需要使用一个图片裁剪控件来编辑用户上传的图片。本着尽量不重复造轮子的原则，我找了下现在UWP生态圈里可用的图片裁剪控件，然后发现一个悲惨的事实：UWP生态圈甚至没有一个体验优秀的图片裁剪控件！
举例来说，就连现在商店里做的比较好的网易云音乐、IT之家以及爱奇艺等应用，他们使用的图片裁剪控件体验也糟糕的一塌糊涂（有认识他们开发人员的大佬，欢迎把我的这篇文章推荐给他们，不怕打脸）。
下图是爱奇艺与IT之家的头像裁剪控件：
那么好吧，我们只好又来造轮子了！
借鉴优秀的前辈
现阶段在Windows平台上，最让我称佩的裁剪图片的应用就是Windows照片了。
它有以下两个优点：
- 裁剪区域永远显示在视觉中心，突出重点；
- 操作体验顺畅，触屏操作也能有很好体验。
这次我们就来“抄袭”一下这个系统应用。
如何实现
有了实现目标，接下来就是思考如何编码实现了。
需要哪些属性来控制裁剪区域
分析一下这个控件的组成部分，其实就是由三部分组成的：最下层裁剪源图像，上层控制裁剪区域的四个按钮，以及遮盖在图像上的黑色半透明遮罩层。
所以我定义了下面几个依赖属性来控制界面：
- SourceImage：类型为
WriteableBitmap，控制裁剪图像源； - X1,Y1,X2,Y2：这四个
double值，控制剪裁区域左上角与右下角两个点坐标； - AspectRatio：类型为
double值，控制裁剪图像纵横比；
另外还定义了两个主要的私有属性用来更新界面布局：
- _maskAreaGeometryGroup：类型为
GeometryGroup，控制黑色半透明遮罩层； - _imageTransform：类型为
CompositeTransform，控制裁剪过程中的源图像变换。
这样的话，更改裁剪区域只需要修改X1,Y1,X2,Y2这四个值就可以了。
另外，如果我们通过拖动图片来移动选择区域，同样是修改X1,Y1,X2,Y2的值（而不是对图片进行变换，动图中可能看不出来，源代码中可以看到）。
控制裁剪图像源Transform
在Windows照片应用裁剪图片控件中，其体验良好的一个主要原因就是剪裁区域永远处于视觉中心，这是通过控制裁剪图像源在界面上的Transform来完成的。
我们可以看到，裁剪图像源的变换规则如下：
- 裁剪区域永远位于界面中心（使用Uniform规则）；
- 当裁剪区域缩小时，在停止拖动裁剪框控制按钮时，更新裁剪图像源的Transform；
- 当裁剪区域扩大时，实时更新裁剪图像源的Transform。
限制剪裁区域范围
另外要注意的是，我们必须保证X1,Y1,X2,Y2取值范围不超过图片区域。
这里有个关于Rect的坑要说明下。一开始我选用的判断方法是：通过Rect.Contains方法传入剪裁区域左上角与右下角两个点坐标，如果均为true，代表剪裁区域范围合法。但是我发现，在Rect长宽为有小数部分的double值时，如果我把右下角坐标设置为new Point(Rect.X + Rect.Width, Rect.Y + Rect.Height)，这个方法会返回错误的false值，实在是坑爹！
因此，考虑到使用场景，我为Rect写了另外一个扩展方法：
public static bool IsSafePoint(this Rect targetRect, Point point)
{
if (point.X - targetRect.X < -0.01)
return false;
if (point.X - (targetRect.X + targetRect.Width) > 0.01)
return false;
if (point.Y - targetRect.Y < -0.01)
return false;
if (point.Y - (targetRect.Y + targetRect.Height) > 0.01)
return false;
return true;
}
核心逻辑代码
下图是这个图片剪裁控件的核心逻辑：
其中InitImageLayout方法会在图片源变化时被调用，它会初始化图片布局（通过调用UpdateImageLayout方法）。
private void InitImageLayout()
{
_maxClipRect = new Rect(0, 0, SourceImage.PixelWidth, SourceImage.PixelHeight);
var maxSelectedRect = new Rect(1, 1, SourceImage.PixelWidth - 2, SourceImage.PixelHeight - 2);
_currentClipRect = KeepAspectRatio ? maxSelectedRect.GetUniformRect(AspectRatio) : maxSelectedRect;
UpdateImageLayout();
}
UpdateImageLayout方法用于初始化控件或者控件SizeChanged时，调用此方法更新控件布局（通过调用UpdateImageLayoutWithViewport方法）。
private void UpdateImageLayout()
{
var canvasRect = new Rect(0, 0, CanvasWidth, CanvasHeight);
var uniformSelectedRect = canvasRect.GetUniformRect(_currentClipRect.Width / _currentClipRect.Height);
UpdateImageLayoutWithViewport(uniformSelectedRect, _currentClipRect);
}
UpdateImageLayoutWithViewport方法是更新控件布局的核心逻辑，它接受两个参数：viewport和viewportImgRect，其中viewport代表的是实际呈现在你视觉中心的区域，viewportImgRect表示viewport所对应的实际图片区域（以实际像素大小为单位），代码将通过这两个参数更新裁剪图像源的Transform。
private void UpdateImageLayoutWithViewport(Rect viewport, Rect viewportImgRect)
{
var imageScale = viewport.Width / viewportImgRect.Width;
_imageTransform.ScaleX = _imageTransform.ScaleY = imageScale;
_imageTransform.TranslateX = viewport.X - viewportImgRect.X * imageScale;
_imageTransform.TranslateY = viewport.Y - viewportImgRect.Y * imageScale;
var selectedRect = _imageTransform.TransformBounds(_currentClipRect);
_limitedRect = _imageTransform.TransformBounds(_maxClipRect);
var startPoint = _limitedRect.GetSafePoint(new Point(selectedRect.X, selectedRect.Y));
var endPoint = _limitedRect.GetSafePoint(new Point(selectedRect.X + selectedRect.Width, selectedRect.Y + selectedRect.Height));
_changeByCode = true;
X1 = startPoint.X;
Y1 = startPoint.Y;
X2 = endPoint.X;
Y2 = endPoint.Y;
_changeByCode = false;
}
UpdateClipRectWithAspectRatio则在用户对剪裁区域改变时被调用，其中dragPoint代表用户操作的哪个按钮，diffPos代表该按钮的前后位置差值。
private void UpdateClipRectWithAspectRatio(DragPoint dragPoint, Point diffPos)
{
if (KeepAspectRatio)
{
if (Math.Abs(diffPos.X / diffPos.Y) > AspectRatio)
{
if (dragPoint == DragPoint.UpperLeft || dragPoint == DragPoint.LowerRight)
diffPos.Y = diffPos.X / AspectRatio;
else
diffPos.Y = -diffPos.X / AspectRatio;
}
else
{
if (dragPoint == DragPoint.UpperLeft || dragPoint == DragPoint.LowerRight)
diffPos.X = diffPos.Y * AspectRatio;
else
diffPos.X = -diffPos.Y * AspectRatio;
}
}
var startPoint = new Point(X1, Y1);
var endPoint = new Point(X2, Y2);
switch (dragPoint)
{
case DragPoint.UpperLeft:
startPoint.X += diffPos.X;
startPoint.Y += diffPos.Y;
break;
case DragPoint.UpperRight:
endPoint.X += diffPos.X;
startPoint.Y += diffPos.Y;
break;
case DragPoint.LowerLeft:
startPoint.X += diffPos.X;
endPoint.Y += diffPos.Y;
break;
case DragPoint.LowerRight:
endPoint.X += diffPos.X;
endPoint.Y += diffPos.Y;
break;
}
if (_limitedRect.IsSafePoint(startPoint) && _limitedRect.IsSafePoint(endPoint))
{
var canvasRect = new Rect(0, 0, CanvasWidth, CanvasHeight);
var newRect = new Rect(startPoint, endPoint);
canvasRect.Union(newRect);
if (canvasRect.X < 0 || canvasRect.Y < 0 || canvasRect.Width > CanvasWidth ||
canvasRect.Height > CanvasHeight)
{
var inverseImageTransform = _imageTransform.Inverse;
if (inverseImageTransform != null)
{
var movedRect = inverseImageTransform.TransformBounds(
new Rect(startPoint, endPoint));
movedRect.Intersect(_maxClipRect);
_currentClipRect = movedRect;
var oriCanvasRect = new Rect(0, 0, CanvasWidth, CanvasHeight);
var viewportRect = oriCanvasRect.GetUniformRect(canvasRect.Width / canvasRect.Height);
var viewportImgRect = inverseImageTransform.TransformBounds(canvasRect);
UpdateImageLayoutWithViewport(viewportRect, viewportImgRect);
}
}
else
{
X1 = startPoint.X;
Y1 = startPoint.Y;
X2 = endPoint.X;
Y2 = endPoint.Y;
}
}
}
UpdateMaskArea方法用来更新遮盖在裁剪图像源上的黑色半透明遮罩层，其实就是图像上覆盖了一个Path元素，这里就不细讲了，直接贴代码。
private void UpdateMaskArea()
{
_maskAreaGeometryGroup.Children.Clear();
_maskAreaGeometryGroup.Children.Add(new RectangleGeometry
{
Rect = new Rect(-_layoutGrid.Padding.Left, -_layoutGrid.Padding.Top, _layoutGrid.ActualWidth,
_layoutGrid.ActualHeight)
});
_maskAreaGeometryGroup.Children.Add(new RectangleGeometry {Rect = new Rect(new Point(X1, Y1), new Point(X2, Y2))});
_layoutGrid.Clip = new RectangleGeometry
{
Rect = new Rect(0, 0, _layoutGrid.ActualWidth,
_layoutGrid.ActualHeight)
};
}
结尾
到这里，这个控件的所有东西就讲的差不多了，大家有没有觉得还缺了点什么？
对的，它还缺少了裁剪图像源Transform变化时的过渡动画，对于优秀的用户体验来说，这是不可或缺的！
之后我会抽时间补完这部分，并且跟大家讲一点Composition Api的东西，请大家敬请期待!
这篇文章到此结束，谢谢大家阅读！
