iOS 图片裁剪功能介绍

今天给大家介绍一个小功能，图片裁剪，并且通过一个小demo向大家讲解。先看一下demo的效果图片：

图片裁剪.gif

图片裁剪功能的实现，就用到了平时使用的上下文，不过这里的上下文是位图上下文，需要我们手动创建：

    //开启一个位图上下文，注意位图上下文跟view无关，所以不需要drawRect
    // size：位图上下文的尺寸（新图片的尺寸）
    //opaque:不透明的  YES:不透明  NO:透明， 通常我们一般用透明的上下文
    //scale:通常不需要设置缩放
    UIGraphicsBeginImageContextWithOptions(<#CGSize size#>, <#BOOL opaque#>, <#CGFloat scale#>)

当创建的位图上下文绘制完成之后，可以获得上下文上对应的图片

    // 这是一个函数，返回值就是文图上下文绘制出的图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

当使用完位图上下文之后，有一点需要注意，因为这里的上下文是我们手动创建出来的，一定记得要关闭创建出的上下文，释放掉绘制图片使用的内存

    // 关闭位图上下文
    UIGraphicsEndImageContext();

了解了这三个位图上下文主要使用方法之后，我们就可以完成这个图片裁剪的demo了，这里会为大家附上代码，代码中的注释会为大家讲解：

#import "ViewController.h"

@interface ViewController ()

/// 起始点
@property (nonatomic, assign) CGPoint startPoint;
/// 半透明view
@property (nonatomic, strong) UIView *clipView;
/// 图片(在storyboard中，占了view大小的图片)
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 给控制器的view添加pan手势
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    
    [self.view addGestureRecognizer:pan];
}

-(void)pan:(UIPanGestureRecognizer *)pan {
    CGPoint endPoint = CGPointZero;

    if (pan.state == UIGestureRecognizerStateBegan) { //一开始拖动的时候
        // 获取一开始的点
        self.startPoint = [pan locationInView:self.view];
    } else if (pan.state == UIGestureRecognizerStateChanged) { // 拖动过程中
        // 获取结束点
        endPoint = [pan locationInView:self.view];
        
        CGFloat w = endPoint.x - _startPoint.x;
        CGFloat h = endPoint.y - _startPoint.y;
        
        // 截取范围
        CGRect clipRect = CGRectMake(self.startPoint.x, self.startPoint.y, w, h);
        self.clipView.frame = clipRect;
    } else if (pan.state == UIGestureRecognizerStateEnded) {
        // 创建上下文
        UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0);
        
        // 获取上下文
        CGContextRef context = UIGraphicsGetCurrentContext();
        
        // 设置裁剪区域
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.clipView.frame];
        
        // 添加裁剪
        [path addClip];
        // 将图片渲染到上下图中
        [self.imageView.layer renderInContext:context];
        
        // 获取截取下来的图片
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        
        UIGraphicsEndImageContext();
        
        self.imageView.image = image;
        
        // 截取的半透明view移除
        [self.clipView removeFromSuperview];
        
        self.clipView = nil;
    }
}

#pragma mark - Get方法
-(UIView *)clipView {
    if (!_clipView) {
        _clipView = [[UIView alloc] init];
        _clipView.backgroundColor = [UIColor blackColor];
        _clipView.alpha = 0.3;
        
        [self.view addSubview:_clipView];
    }
    
    return _clipView;
}

@end

ok，图片的裁剪简单的就搞定了。喜欢的小伙伴点个赞啦😍