做一个属于自己的照片编辑器

使用过UIImagePickerController的童鞋们都知道，iOS在从相册或者摄像头后选择照片后可以编辑（选择照片的一部分剪切下来），只需要将UIImagePickerController的allowsEditing属性设为YES即可。哇，so easy！

真的如此简单吗？你如果这样想就可以不要继续看下去了。

用过的童鞋应该都会这么认为（至少我是这么认为）系统的那个渣渣真是他妈的弱爆了，主要体现在如下两点：
1、只能裁剪正方形；
2、照片边缘部分可能无法移动到裁剪区域。

哦，怎么办，产品狗就要给他弄一个长方形，甚至裁剪一个不规则形状。

哥前两天就遇到了这么狗血的事情，怎么办？哥百度、谷歌、github都了个遍，好像没找到有什么卵用的东西，于是乎只能自己动手写一个了。

好了，进入正题。如何实现一个可以剪切任意形状的图片编辑器？
需要考虑如下两个问题：
1、用户如何操作，以及界面的实现
2、如何裁剪。

首先解决第一个问题：
系统的图片编辑器是选中框不能移动，可以通过缩放和移动图片，从而确定需要选中的图片区域，此方法的优点是图片可以缩放，小图片可以放大来看清楚。但说真的，我不习惯这种操作。
我采取的方式是，将图片放在确定的位置，通过缩放和移动选中框而确定选中的图片区域。
实现如下：为了实现不规则形状选择时，未选中部分也有半透明阴影，通过在遮挡视图上绘制而成：

遮挡视图.h

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, MGCEditSelectImageViewShapeStyle) {
    MGCEditSelectImageViewShapeStyle_rect,
    MGCEditSelectImageViewShapeStyle_circle,
};

// 遮挡视图（目前只支持矩形和圆形，其它形状可以类似实现）
@interface MGCEditSelectImageView : UIView
@property (nonatomic, readonly) CGFloat width;
@property (nonatomic, readonly) CGFloat height;

@property (nonatomic, readonly) MGCEditSelectImageViewShapeStyle style;

/**
 *  画形状
 *
 *  @param width  宽度、长半径
 *  @param height 高度、短半径
 *  @param style  形状类型，当画矩形时，若width或者height中的一个为0，那么画正方形，当画椭圆时，若width或者height为0时，画圆
 */
- (void)drawShapeWithWidth:(CGFloat)width height:(CGFloat)height shapeStyle:(MGCEditSelectImageViewShapeStyle)style;

@end

遮挡视图.m

#import "MGCEditSelectImageView.h"

@interface MGCEditSelectImageView ()

@property (nonatomic, assign) CGFloat width;
@property (nonatomic, assign) CGFloat height;

@property (nonatomic, assign) MGCEditSelectImageViewShapeStyle style;

@end

@implementation MGCEditSelectImageView

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();

    if (self.superview) {

        // 绘制边框，
        CGContextAddRect(context, CGRectMake(-self.frame.origin.x - 1, -self.frame.origin.y - 1, self.superview.frame.size.width + 2, self.superview.frame.size.height + 2));
    }else{
        CGContextAddRect(context, self.bounds);
    }

    [self drawShapeContext:context];
    // 设置触笔颜色
    [[UIColor whiteColor] setStroke];
    // 将未选中部分蛇者为阴影半透明颜色
    [[[UIColor blackColor] colorWithAlphaComponent:0.6] setFill];
    CGContextDrawPath(context, kCGPathEOFillStroke);

}

#pragma mark - pravate
// 绘制形状
- (void)drawShapeContext:(CGContextRef)context
{
    if (self.width || self.height) {
        if (self.width <= 0 && self.height > 0) {
            self.width = self.height;
        }else if (self.height <= 0 && self.width > 0){
            self.height = self.width;
        }

        CGFloat x = (self.frame.size.width - self.width) / 2;
        CGFloat y = (self.frame.size.height - self.height) / 2;

        CGRect rect = CGRectMake(x, y, self.width, self.height);

        if (self.style == MGCEditSelectImageViewShapeStyle_rect) {
        // 绘制矩形
            CGContextAddRect(context, rect);
        }else if (self.style == MGCEditSelectImageViewShapeStyle_circle){
        // 绘制圆形
            CGContextAddEllipseInRect(context, rect);
        }
    }

}

#pragma mark - public
- (void)drawShapeWithWidth:(CGFloat)width height:(CGFloat)height shapeStyle:(MGCEditSelectImageViewShapeStyle)style
{
    self.width = width;
    self.height = height;
    self.style = style;

    [self setNeedsDisplay];
}

@end

遮挡视图已经解决，嘿，为什么把选中部分的形状绘制在中心？因为这样的话，在移动选择区域时只需要移动整个遮挡视图，而无需每次都计算绘制形状的位置，为了保证无论如何移动，遮挡视图都会覆盖整个父视图，因此，该遮挡视图的大小必选是父视图大小的9倍。

接下来看控制器代码：
.h

#import <UIKit/UIKit.h>

#import "MGCEditSelectImageView.h"

@class MGCEditImageViewController;

@protocol MGCEditImageViewControllerDelegate <NSObject>

// 编辑完成
- (void)editDidFinsh:(MGCEditImageViewController *)controller originalImage:(UIImage *)originalImage editImage:(UIImage *)editImage;
// 编辑取消
- (void)editCancel:(MGCEditImageViewController *)controller origiinalImage:(UIImage *)originalImage;

@end

@interface MGCEditImageViewController : UIViewController

@property (nonatomic, strong) UIImage *image;
@property (nonatomic, assign) MGCEditSelectImageViewShapeStyle editStyle;      //
@property (nonatomic, assign) CGFloat ratioW_Y;                 // 宽高比      // 默认为1
@property (nonatomic, assign) CGFloat suitableWidth;            // 最适合的宽度，或者直径

@property (nonatomic, weak) id<MGCEditImageViewControllerDelegate>delegate;

@end

.m

#import "MGCEditImageViewController.h"

#import "UIImage+addition.h"

@interface MGCEditImageViewController ()

@property (nonatomic, strong) UIImageView *imageView;   // 图片视图
@property (nonatomic, strong) MGCEditSelectImageView *selecterView;     // 选择视图
@property (nonatomic, strong) UIView *bottomBar;
@property (nonatomic, strong) UIButton *cancelButton;
@property (nonatomic, strong) UIButton *selectButton;


@property (nonatomic, assign) CGFloat selectViewScale;         // 默认为1
@property (nonatomic, assign) CGPoint panStarPoint;
@property (nonatomic, assign) CGFloat pinchLastScale;

@end

@implementation MGCEditImageViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    self.view.backgroundColor = [UIColor blackColor];

    [self.view addSubview:self.imageView];
    [self.view addSubview:self.bottomBar];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-0-[_bottomBar]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_bottomBar)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_bottomBar(44)]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_bottomBar)]];

    UITapGestureRecognizer *tapGes = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doubleClickSelectView:)];
    tapGes.numberOfTapsRequired = 2;
    [self.view addGestureRecognizer:tapGes];

    UIPinchGestureRecognizer *pinchGes = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(zoomSelectView:)];
    [self.view addGestureRecognizer:pinchGes];

    UIPanGestureRecognizer *panGes = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(moveSelectView:)];
    [self.view addGestureRecognizer:panGes];
}

- (instancetype)init
{
    if (self = [super init]) {
        self.selectViewScale = 1;
        self.ratioW_Y = 1;
        self.editStyle = MGCEditSelectImageViewShapeStyle_rect;
        self.panStarPoint = CGPointZero;
    }
    return self;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES animated:YES];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [self.navigationController setNavigationBarHidden:NO animated:YES];
    [[UIApplication sharedApplication] setStatusBarHidden:NO];
    [super viewWillDisappear:animated];
}

- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];

    // 设置图片视图的位置和大小
    [self updateImageViewFram];
    // 更新选择视图的位置
    [self updateSelectViewFramWithCenter:CGPointMake(self.view.frame.size.width / 2, self.view.frame.size.height / 2)];

    // 指定选中区域的大小和图片视图大小的比例
    self.selectViewScale = [self suitableScale];
    // 根据selectViewScale从新绘制选中区域
    [self updateSelectView];
}

#pragma mark - get and set
// 图片视图
- (UIImageView *)imageView
{
    if (!_imageView) {
        _imageView = [[UIImageView alloc] init];
        _imageView.backgroundColor = [UIColor clearColor];
    }
    return _imageView;
}
// 选择视图（遮挡视图）
- (MGCEditSelectImageView *)selecterView
{
    if (!_selecterView) {
        _selecterView = [[MGCEditSelectImageView alloc] init];
        _selecterView.backgroundColor = [UIColor clearColor];
        _selecterView.userInteractionEnabled = NO;
        _selecterView.translatesAutoresizingMaskIntoConstraints = NO;
    }
    return _selecterView;
}

- (void)setImage:(UIImage *)image
{
    _image = image;
    self.imageView.image = image;
    // 更新图片视图的位置
    [self updateImageViewFram];
}
// 取消按钮
- (UIButton *)cancelButton
{
    if (!_cancelButton) {
        _cancelButton = [self barButtonWithTitle:@"取消"];
        [_cancelButton addTarget:self action:@selector(cancel:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _cancelButton;
}
// 确定按钮
- (UIButton *)selectButton
{
    if (!_selectButton) {
        _selectButton = [self barButtonWithTitle:@"使用照片"];
        [_selectButton addTarget:self action:@selector(confirm:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _selectButton;
}
// 底部工具栏
- (UIView *)bottomBar
{
    if (!_bottomBar) {
        _bottomBar = [[UIView alloc] init];
        _bottomBar.backgroundColor = [UIColor clearColor];
        _bottomBar.translatesAutoresizingMaskIntoConstraints = NO;

        [_bottomBar addSubview:self.cancelButton];
        [_bottomBar addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-20-[_cancelButton]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_cancelButton)]];
        [_bottomBar addConstraint:[NSLayoutConstraint constraintWithItem:self.cancelButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:_bottomBar attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];

        [_bottomBar addSubview:self.selectButton];
        [_bottomBar addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[_selectButton]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_selectButton)]];
        [_bottomBar addConstraint:[NSLayoutConstraint constraintWithItem:self.selectButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:_bottomBar attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
    }

    return _bottomBar;
}

#pragma mark - private
- (UIButton *)barButtonWithTitle:(NSString *)title
{
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.backgroundColor = [UIColor clearColor];
    [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [button setTitle:title forState:UIControlStateNormal];
    button.translatesAutoresizingMaskIntoConstraints = NO;

    return button;
}

// 图片和self.view的比例
- (CGFloat)ratioImageToView
{
    CGFloat scaleX = self.image.size.width / self.view.frame.size.width;
    CGFloat scaleY = self.image.size.height  / self.view.frame.size.height;
    return MAX(scaleX, scaleY);
}

// 更新图片视图视图
- (void)updateImageViewFram
{
    // 获取图片和self.view的正确显示比例
    CGFloat maxScale = [self ratioImageToView];

    CGFloat width = self.image.size.width / maxScale;
    CGFloat height = self.image.size.height / maxScale;

    self.imageView.frame = CGRectMake(0, 0, width, height);
    self.imageView.center = CGPointMake(self.view.frame.size.width / 2, self.view.frame.size.height / 2);
}

// 更新选择视图位置和大小
- (void)updateSelectViewFramWithCenter:(CGPoint)center
{
    // 大小设置为父视图的9倍，保证始终覆盖父视图
    self.selecterView.frame = CGRectMake(0, 0, self.view.frame.size.width * 3, self.view.frame.size.height * 3);

    // 不需要考虑左右或者上下都超出的情况，因为形状的大小有selectViewScale控制
    if (center.x - self.selecterView.width / 2 < self.imageView.frame.origin.x) {
        center.x = self.imageView.frame.origin.x + self.selecterView.width / 2;
    }else if (center.x + self.selecterView.width / 2 > CGRectGetMaxX(self.imageView.frame)){
        center.x = CGRectGetMaxX(self.imageView.frame) - self.selecterView.width / 2;
    }

    if (center.y - self.selecterView.height / 2 < self.imageView.frame.origin.y) {
        center.y = self.imageView.frame.origin.y + self.selecterView.height / 2;
    }else if (center.y + self.selecterView.height / 2 > CGRectGetMaxY(self.imageView.frame)){
        center.y = CGRectGetMaxY(self.imageView.frame) - self.selecterView.height / 2;
    }

    self.selecterView.center = center;
}

- (void)updateSelectView
{

    if (self.selectViewScale > 1) {
        self.selectViewScale = 1;
    }else if (self.selectViewScale < 0.01){
        self.selectViewScale = 0.01;
    }

    CGFloat imageViewRadioW_Y = self.imageView.frame.size.width / self.imageView.frame.size.height;

    CGFloat width = 0;
    CGFloat height = 0;

    if (imageViewRadioW_Y > self.ratioW_Y) {
        height = self.imageView.frame.size.height * self.selectViewScale;
        width = height * self.ratioW_Y;
    }else{
        width = self.imageView.frame.size.width * self.selectViewScale;
        height = width / self.ratioW_Y;
    }

    [self.selecterView drawShapeWithWidth:width height:height shapeStyle:self.editStyle];
}

// 根据给出的最合适的宽度和宽高比，计算最合适的选择形状的和图片视图的比例
- (CGFloat)suitableScale
{
    if (self.suitableWidth > 0) {

        CGFloat suitableHeight = self.suitableWidth / self.ratioW_Y;
        return MIN(MAX(suitableHeight / self.imageView.frame.size.height, self.suitableWidth / self.imageView.frame.size.width), 1) ;

    }else{
        return 1;
    }
}

#pragma mark - action

// 双击试，回复最合适的大小，并置于中心
- (void)doubleClickSelectView:(UITapGestureRecognizer *)sender
{
    self.selectViewScale = [self suitableScale];
    [self updateSelectView];
    self.selecterView.center = self.view.center;
}

// 缩放选择区域
- (void)zoomSelectView:(UIPinchGestureRecognizer *)sender
{
    if (self.pinchLastScale == 0) {
        self.pinchLastScale = sender.scale;
        return;
    }

    sender.scale = sender.scale - self.pinchLastScale + 1;
    CGFloat scale = self.selectViewScale * sender.scale;
    self.selectViewScale = scale > 1 ? 1 : scale;
    [self updateSelectView];

    [self updateSelectViewFramWithCenter:self.selecterView.center];

    self.pinchLastScale = sender.scale;

}

// 移动选择区域，实则移动整个选择视图
- (void)moveSelectView:(UIPanGestureRecognizer *)sender
{
    CGPoint startCenter = self.selecterView.center;

    CGRect shapeFramToSeleView = [self.selecterView convertRect:CGRectMake(self.selecterView.frame.size.width / 2 - self.selecterView.width / 2, self.selecterView.frame.size.height / 2 - self.selecterView.height / 2, self.selecterView.width, self.selecterView.height) toView:self.view];
    BOOL startPointInShapeRect = self.panStarPoint.x >= shapeFramToSeleView.origin.x && self.panStarPoint.y >= shapeFramToSeleView.origin.y && self.panStarPoint.x <= CGRectGetMaxX(shapeFramToSeleView) && self.panStarPoint.y <= CGRectGetMaxY(shapeFramToSeleView);

    CGPoint gesCenter = [sender locationInView:sender.view];

    if (sender.state == UIGestureRecognizerStateChanged) {
        if (startPointInShapeRect) {
            CGPoint center = gesCenter;
            [self updateSelectViewFramWithCenter:center];
            self.panStarPoint = gesCenter;
        }
    }else if (sender.state == UIGestureRecognizerStateEnded){
        self.panStarPoint = CGPointZero;
    }else if (sender.state == UIGestureRecognizerStateBegan){
        self.panStarPoint = gesCenter;
    }

    if (self.selecterView.center.x != startCenter.x || self.selecterView.center.y != startCenter.y) {
        [self updateSelectView];
    }
}

- (void)confirm:(UIButton *)sender
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(editDidFinsh:originalImage:editImage:)]) {
        [self.delegate editDidFinsh:self originalImage:self.image editImage:[self editImage]];
    }
}

- (void)cancel:(UIButton *)sender
{
    if (self.delegate && [self.delegate respondsToSelector:@selector(editCancel:origiinalImage:)]) {
        [self.delegate editCancel:self origiinalImage:self.image];
    }
}

上面完成了第一个问题，下面来解决裁剪的问题，在MGCEditImageViewController的实现中添加如下代码：

- (UIImage *)editImage
{
    CGFloat ratioImageToView = [self ratioImageToView];
    CGRect selectToImageView = [self.selecterView convertRect:CGRectMake(self.selecterView.frame.size.width / 2 - self.selecterView.width / 2, self.selecterView.frame.size.height / 2 - self.selecterView.height / 2, self.selecterView.width, self.selecterView.height) toView:self.imageView];
    CGFloat ratio = ratioImageToView;
    CGRect resultRect = CGRectMake(selectToImageView.origin.x * ratio, selectToImageView.origin.y * ratio, selectToImageView.size.width * ratio, selectToImageView.size.height * ratio);

    return [self.image cutFromRect:resultRect];
}

添加一个UIImage的类别，实现如下裁剪代码：

//  裁剪图片
- (UIImage *)cutFromRect:(CGRect)rect
{
    UIGraphicsBeginImageContext(CGSizeMake(self.size.width, self.size.height));
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextAddRect(context, rect);
    CGContextClip(context);

    [self drawInRect:CGRectMake(0, 0, self.size.width, self.size.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    UIGraphicsBeginImageContext(rect.size);
    context = UIGraphicsGetCurrentContext();
    [newImage drawInRect:CGRectMake(-rect.origin.x, -rect.origin.y, self.size.width, self.size.height)];
    newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

好了，到此，已经实现了一个可以裁剪任何比例图片的编辑器了，在裁剪圆形图片了，代码还未上传到托管服务器，需要源码的伙伴可以联系我：770322699@qq.com。
demo中，为了扩展强，裁剪圆形图片仍然裁剪的矩形，在显示时通过设置mask显示圆形，若需要裁剪圆形，在裁剪时添加圆形path即可。
下面是效果图：