iOS 裁剪工具
下载
使用说明
[[SPClipTool shareClipTool] sp_clipOriginImage:pickerImage complete:^(UIImage * _Nonnull image) {
// 获取到裁剪后的image 后续操作
}];
需求
图片裁剪，效果如下图，支持图片拖拽，缩放，裁剪框自由变换大小。
思路
两个UIImageView，一个做背景，并加上蒙版效果，另外一个通过蒙版控制显示区域，并且保证两个UIImageView平移和缩放的时候完全重叠。最后使用一个UIView来做交互，绘制三分网格线（专业术语我不知道叫啥，截图时一个参照，2/3 ≈0.667 接近黄金比0.618）。
注意
-
坐标系转换问题。
-
mask灵活使用问题。
-
手势的处理和三分网格线绘制的时候，计算线条宽度和长度需要特别注意。
-
为了增强用户体验，在裁剪框边缘交互设计的时候，注意额外增加用户的可操控范围。
实现
- 初始化两个UIImageView，一个做背景图（backgroudImageView），一个用来显示裁剪区域（clipImageView），拖拽手势加到了clipImageView。
- (void)setupImageView {
// backgroudImageView
UIImageView *backgroudImageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
backgroudImageView.contentMode = UIViewContentModeScaleAspectFit;
backgroudImageView.image = self.originImage;
[self.view addSubview:backgroudImageView];
self.backgroudImageView = backgroudImageView;
backgroudImageView.layer.mask = [[CALayer alloc] init];
backgroudImageView.layer.mask.frame = backgroudImageView.bounds;
backgroudImageView.layer.mask.backgroundColor = [UIColor colorWithWhite:1 alpha:0.5].CGColor;
// clipImageView
UIImageView *clipImageView = [[UIImageView alloc] initWithFrame:backgroudImageView.frame];
clipImageView.userInteractionEnabled = YES;
clipImageView.image = backgroudImageView.image;
clipImageView.contentMode = backgroudImageView.contentMode;
[self.view addSubview:clipImageView];
self.clipImageView = clipImageView;
clipImageView.layer.mask = [[CALayer alloc] init];
clipImageView.layer.mask.backgroundColor = [UIColor whiteColor].CGColor;
clipImageView.layer.mask.borderColor = [UIColor whiteColor].CGColor;
clipImageView.layer.mask.borderWidth = 1;
[clipImageView.layer.mask removeAllAnimations];
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(imagePan:)];
[clipImageView addGestureRecognizer:panGesture];
}
- 初始化用于裁剪交互的SPClipView
- (void)setupClipView {
SPClipView *clipView = [[SPClipView alloc] init];
clipView.backgroundColor = [UIColor clearColor];
// 打开下面两行注释，可以查看真实clipView的大小。
// clipView.layer.borderColor = [UIColor whiteColor].CGColor;
// clipView.layer.borderWidth = 1;
[self.view addSubview:clipView];
self.clipView = clipView;
// 获取真实frame
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
clipView.frame = CGRectMake(0, 0, self.view.width / 1.5, self.view.height / 1.5);
clipView.center = self.view.center;
self.backgroudImageView.frame = self.view.bounds;
self.clipImageView.frame = self.backgroudImageView.frame;
[self dealMask];
});
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(clipPan:)];
[clipView addGestureRecognizer:panGesture];
UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchGestureAction:)];
[self.view addGestureRecognizer:pinchGesture];
}
- 手势处理
#pragma mark- UIPanGestureRecognizer
- (void)clipPan:(UIPanGestureRecognizer *)panGesture {
CGPoint point = [panGesture translationInView:self.clipView];
self.clipView.origin = [self.clipView convertPoint:point toView:self.view];
[self expandClipView:panGesture];
[self dealGuideLine:panGesture];
[self dealMask];
[panGesture setTranslation:CGPointMake(0, 0) inView:self.view];
}
- (void)imagePan:(UIPanGestureRecognizer *)panGesture {
CGPoint point = [panGesture translationInView:self.clipImageView];
self.clipImageView.origin = [self.clipImageView convertPoint:point toView:self.view];
self.backgroudImageView.center = self.clipImageView.center;
[self dealGuideLine:panGesture];
[self dealMask];
[panGesture setTranslation:CGPointMake(0, 0) inView:self.view];
}
#pragma mark- UIPinchGestureRecognizer
- (void)pinchGestureAction:(UIPinchGestureRecognizer *)pinchGesture {
switch (pinchGesture.state) {
case UIGestureRecognizerStateBegan: {
if (lastScale <= minScale) {
lastScale = minScale;
}else if (lastScale >= maxScale) {
lastScale = maxScale;
}
self.clipImageViewCenter = self.clipImageView.center;
self.clipView.showGuideLine = YES;
}
case UIGestureRecognizerStateChanged: {
CGFloat currentScale = lastScale + pinchGesture.scale - 1;
if (currentScale > minScale && currentScale < maxScale) {
[self dealViewScale:currentScale];
}
}
break;
case UIGestureRecognizerStateEnded:
lastScale += (pinchGesture.scale - 1);
self.clipView.showGuideLine = NO;
[self.clipView setNeedsDisplay];
default:
break;
}
}
#pragma mark- Action
- (void)dealViewScale:(CGFloat)currentScale {
self.clipImageView.width = currentScale * self.view.width;
self.clipImageView.height = currentScale * self.view.height;
self.clipImageView.center = self.clipImageViewCenter;
self.backgroudImageView.frame = self.clipImageView.frame;
self.backgroudImageView.layer.mask.frame = self.backgroudImageView.bounds;
[self.backgroudImageView.layer.mask removeAllAnimations];
[self dealMask];
}
- (void)expandClipView:(UIPanGestureRecognizer *)panGesture {
CGPoint point = [panGesture translationInView:self.clipImageView];
CGFloat margin = 60;
CGFloat minValue = margin;
if (panGesture.numberOfTouches) {
CGPoint location = [panGesture locationOfTouch:0 inView:panGesture.view];
if (location.x < margin) {
self.clipView.width = MAX(self.clipView.width -= point.x, minValue);
}
if ((self.clipView.width - location.x) < margin) {
self.clipView.frame = CGRectMake(self.clipView.x - point.x, self.clipView.y, self.clipView.width + point.x, self.clipView.height);
}
if (location.y < margin) {
self.clipView.height = MAX(self.clipView.height -= point.y, minValue);
}
if ((self.clipView.height - location.y) < margin) {
self.clipView.frame = CGRectMake(self.clipView.x , self.clipView.y - point.y, self.clipView.width, self.clipView.height + point.y);
}
}
}
- (void)dealGuideLine:(UIPanGestureRecognizer *)panGesture {
switch (panGesture.state) {
case UIGestureRecognizerStateBegan:
self.clipView.showGuideLine = YES;
break;
case UIGestureRecognizerStateEnded:
self.clipView.showGuideLine = NO;
break;
default:
break;
}
}
- (void)dealMask {
// 额外增加拖拉区域 增强边缘手势体验
CGFloat margin = 30;
CGRect rect = [self.view convertRect:self.clipView.frame toView:self.clipImageView];
self.clipImageView.layer.mask.frame = CGRectMake(rect.origin.x + margin, rect.origin.y + margin, rect.size.width - 2 * margin, rect.size.height - 2 * margin);
[self.clipView setNeedsDisplay];
[self.clipImageView.layer.mask removeAllAnimations];
}
- 图片裁剪
- (void)clipImage {
CGSize size = self.view.bounds.size;
UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
[self.view drawViewHierarchyInRect:self.view.bounds afterScreenUpdates:NO];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
CGImageRef cgImage = [image CGImage];
CGRect rect = [self.clipImageView convertRect:self.clipImageView.layer.mask.frame toView:self.view];
// 边框线条宽度值
CGFloat borderW = 1;
CGImageRef cgClipImage = CGImageCreateWithImageInRect(cgImage, CGRectMake((rect.origin.x + borderW / 2) * image.scale, (rect.origin.y + borderW / 2) * image.scale, (rect.size.width - borderW) * image.scale, (rect.size.height - borderW) * image.scale));
UIGraphicsEndImageContext();
if (self.complete) {
self.complete([UIImage imageWithCGImage:cgClipImage]);
}
[self dismissViewControllerAnimated:YES completion:nil];
}
-
裁剪区域绘制
在这里，裁剪区域的矩形框我并没有直接采用clipView的fram大小，而是在其内部绘制了一个矩形框，为了让用户在调节边缘的时候更灵活，不然只有当手指在边框内部边缘才能触发调节边框大小的事件。如下图，可以看到clipView真实的大小（外框）。
@implementation SPClipView
- (void)drawRect:(CGRect)rect {
// Drawing code
CGContextRef currentContext = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(currentContext, [UIColor whiteColor].CGColor);
CGContextSetLineWidth(currentContext, 1);
// 额外增加拖拉区域 增强边缘手势体验，该值应该和上文- (void)dealMask；方法中的margin一致
CGFloat margin = 30;
// 绘制矩形框
CGContextAddRect(currentContext, CGRectMake(margin, margin, self.width - 2 * margin, self.height - 2 * margin));
CGContextStrokePath(currentContext);
// 绘制三分线
CGFloat maskW = self.width - 2 * margin;
CGFloat maskH = self.height - 2 * margin;
CGContextSetLineWidth(currentContext, 0.5);
if (self.showGuideLine) {
CGContextSetStrokeColorWithColor(currentContext, [UIColor whiteColor].CGColor);
}else {
CGContextSetStrokeColorWithColor(currentContext, [UIColor clearColor].CGColor);
}
CGContextMoveToPoint(currentContext, margin, maskH / 3 + margin);
CGContextAddLineToPoint(currentContext, self.width - margin, maskH / 3 + margin);
CGContextMoveToPoint(currentContext, margin, 2 / 3.0 * maskH + margin);
CGContextAddLineToPoint(currentContext, self.width - margin, 2 / 3.0 * maskH + margin);
CGContextMoveToPoint(currentContext, maskW / 3 + margin, margin);
CGContextAddLineToPoint(currentContext, maskW / 3+ margin, self.height - margin);
CGContextMoveToPoint(currentContext, 2 / 3.0 * maskW + margin, margin);
CGContextAddLineToPoint(currentContext, 2 / 3.0 * maskW + margin, self.height - margin);
CGContextStrokePath(currentContext);
// 绘制四角
CGFloat cornerL = 15;
CGFloat cornerLW = 2;
// 实际的长度
CGFloat cornerRL = cornerL + cornerLW;
CGPoint originH = CGPointMake(margin - cornerLW, margin - cornerLW / 2);
CGPoint originV = CGPointMake(margin - cornerLW / 2, margin - cornerLW);
CGContextSetStrokeColorWithColor(currentContext, [UIColor whiteColor].CGColor);
CGContextSetLineWidth(currentContext, cornerLW);
// 左上
CGContextMoveToPoint(currentContext, originH.x, originH.y);
CGContextAddLineToPoint(currentContext, originH.x + cornerRL, originH.y);
CGContextMoveToPoint(currentContext, originV.x, originV.y);
CGContextAddLineToPoint(currentContext, originV.x, originV.y + cornerRL);
// 左下
CGContextMoveToPoint(currentContext, originH.x, originH.y + maskH + cornerLW);
CGContextAddLineToPoint(currentContext, originH.x + cornerRL, originH.y + maskH + cornerLW);
CGContextMoveToPoint(currentContext, originV.x, originV.y + maskH + 2 * cornerLW);
CGContextAddLineToPoint(currentContext, originV.x, originV.y + maskH + 2 * cornerLW - cornerRL);
// 右上
CGContextMoveToPoint(currentContext, originH.x + maskW + 2 * cornerLW, originH.y);
CGContextAddLineToPoint(currentContext, originH.x + maskW + 2 * cornerLW - cornerRL, originH.y);
CGContextMoveToPoint(currentContext, originV.x + maskW + cornerLW, originV.y);
CGContextAddLineToPoint(currentContext, originV.x + maskW + cornerLW, originV.y + cornerRL);
// 右下
CGContextMoveToPoint(currentContext, originH.x + maskW + 2 * cornerLW, originH.y + maskH + cornerLW);
CGContextAddLineToPoint(currentContext, originH.x + maskW + 2 * cornerLW - cornerRL, originH.y + maskH + cornerLW);
CGContextMoveToPoint(currentContext, originV.x + maskW + cornerLW, originV.y + maskH + 2 * cornerLW);
CGContextAddLineToPoint(currentContext, originV.x + maskW + cornerLW, originV.y + maskH + 2 * cornerLW - cornerRL);
CGContextStrokePath(currentContext);
}
这里一定要注意线条的宽度，线条是有宽度的，绘制路径位于线条的中心位置。
Super
