[UWP]如何实现UWP平台最佳图片裁剪控件
前几天我写了一个UWP图片裁剪控件ImageCropper(开源地址),自认为算是现阶段UWP社区里最好用的图片裁剪控件了,今天就来分享下我编码的过程。
为什么又要造*
因为开发需要,我们需要使用一个图片裁剪控件来编辑用户上传的图片。本着尽量不重复造*的原则,我找了下现在UWP生态圈里可用的图片裁剪控件,然后发现一个悲惨的事实:UWP生态圈甚至没有一个体验优秀的图片裁剪控件!
举例来说,就连现在商店里做的比较好的网易云音乐、IT之家以及爱奇艺等应用,他们使用的图片裁剪控件体验也糟糕的一塌糊涂(有认识他们开发人员的大佬,欢迎把我的这篇文章推荐给他们,不怕打脸)。
下图是爱奇艺与IT之家的头像裁剪控件:
那么好吧,我们只好又来造*了!
借鉴优秀的前辈
现阶段在Windows平台上,最让我称佩的裁剪图片的应用就是Windows照片了。
它有以下两个优点:
- 裁剪区域永远显示在视觉中心,突出重点;
- 操作体验顺畅,触屏操作也能有很好体验。
这次我们就来“抄袭”一下这个系统应用。
如何实现
有了实现目标,接下来就是思考如何编码实现了。
需要哪些属性来控制裁剪区域
分析一下这个控件的组成部分,其实就是由三部分组成的:最下层裁剪源图像,上层控制裁剪区域的四个按钮,以及遮盖在图像上的黑色半透明遮罩层。
所以我定义了下面几个依赖属性来控制界面:
- SourceImage:类型为
WriteableBitmap
,控制裁剪图像源; - X1,Y1,X2,Y2:这四个
double
值,控制剪裁区域左上角与右下角两个点坐标; - AspectRatio:类型为
double
值,控制裁剪图像纵横比; - MaskArea:类型为
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()
{
if (ImageTransform == null)
ImageTransform = new CompositeTransform();
_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()
{
_maskArea.Children.Clear();
_maskArea.Children.Add(new RectangleGeometry
{
Rect = new Rect(-_layoutGrid.Padding.Left, -_layoutGrid.Padding.Top, _layoutGrid.ActualWidth,
_layoutGrid.ActualHeight)
});
_maskArea.Children.Add(new RectangleGeometry {Rect = new Rect(new Point(X1, Y1), new Point(X2, Y2))});
MaskArea = _maskArea;
_layoutGrid.Clip = new RectangleGeometry
{
Rect = new Rect(0, 0, _layoutGrid.ActualWidth,
_layoutGrid.ActualHeight)
};
}
结尾
到这里,这个控件的所有东西就讲的差不多了,大家有没有觉得还缺了点什么?
对的,它还缺少了裁剪图像源Transform变化时的过渡动画,对于优秀的用户体验来说,这是不可或缺的!
之后我会抽时间补完这部分,并且跟大家讲一点Composition Api的东西,请大家敬请期待!
这篇文章到此结束,谢谢大家阅读!