裁剪 、截屏（Quartz2D）

裁剪截屏.gif

• 核心代码：

 如果要将裁剪后的上下文渲染到控件上，必须设置要将其到控件的layer图层上，调用某个view的layer的renderInContext:方法即可

 [self.imageView.layer renderInContext:UIGraphicsGetCurrentContext()];

1、 裁剪步骤分析

1、开启位图上下文， 
    UIGraphicsBeginImageContextWithOptions(上下文尺寸
, NO, 0);
    
2、设置裁剪区域
      * 通过 UIBezierPath方式   
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.cover.frame];
    [path addClip];  // 设置裁剪区域

3、从上下文中获得裁剪图片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

4、如果要将裁剪后的上下文渲染到控件上，必须设置要将其到控件的layer图层上

 [self.imageView.layer renderInContext:UIGraphicsGetCurrentContext()];

5、关闭位图上下文
    UIGraphicsEndImageContext();

2、实现

• 1.自定义ClipImageView，继承UIImageView

// .h文件
#import 

@interface ClipImageView : UIImageView

@end

// .m实现文件
#import "ClipImageView.h"

#define kToorBarW 100
#define kToorBarH 40

@interface ClipImageView ()

@property (nonatomic, weak) UIToolbar *toolBar;
@property (nonatomic, weak) UIView *cover;
@property (nonatomic, assign) CGPoint beginP;
@property (nonatomic, strong) UIImage *oraginImage;

@end

@implementation ClipImageView

- (void)addGesture{
    
    NSLog(@"%s", __func__);
    
    /**
     1、给imageView添加拖拽手势识别
     */
    UIPanGestureRecognizer *panG = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(imageVPanAction:)];
    
    [self addGestureRecognizer:panG];
    self.userInteractionEnabled = YES; // 允许用户交互，默认是不可以的，手动设置需要
    
    self.clipsToBounds = YES;
    
    if (self.image != nil) {
        self.oraginImage = self.image;
    }
}

// 代码创建
- (nonnull instancetype)initWithFrame:(CGRect)frame{
    
    NSLog(@"%s", __func__);
    
    if (self = [super initWithFrame:frame]) {
        [self addGesture];
    }
    return self;
}

// xib初始化
- (void)awakeFromNib{
    [super awakeFromNib];
    
    NSLog(@"%s", __func__);
    
    [self addGesture];
}

/**
 *  布局
 */
- (void)layoutSubviews{
    
    [super layoutSubviews];
    
    NSLog(@"%s", __func__);
    
    [self addGesture];
}

- (UIToolbar *)toolBar{
    
    if (_toolBar == nil) {
        /**
         1、添加工具条
         */
        //    UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(kMargin, 0, self.view.frame.size.width - 2*kMargin, 60)];
        UIToolbar *toolBar = [[UIToolbar alloc] init];
        toolBar.backgroundColor = [UIColor orangeColor];
        
        UIBarButtonItem *btnItem1 = [[UIBarButtonItem alloc] initWithTitle:@"裁剪" style:UIBarButtonItemStylePlain target:self action:@selector(clipAction)];
        UIBarButtonItem *btnItem2 = [[UIBarButtonItem alloc] initWithTitle:@"撤销" style:UIBarButtonItemStylePlain target:self action:@selector(doAgainClip)];
        
        [toolBar setItems:@[btnItem1, btnItem2] animated:YES];
        _toolBar = toolBar;
        
        [self addSubview:toolBar];
    }
    return _toolBar;
}


/**
 *  懒加载，设置遮罩视图
 */
- (UIView *)cover{
    if (_cover == nil) {
        UIView *cover = [[UIView alloc] init];
        _cover = cover;
        _cover.backgroundColor = [UIColor colorWithRed:155 green:0 blue:0 alpha:0.3];
        [self addSubview:cover];
        
        // 给cover添加拖拽手势
        UIPanGestureRecognizer *coverPanG = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(coverPanAction:)];
        [self.cover addGestureRecognizer:coverPanG];
        self.cover.hidden = YES;
        self.toolBar.hidden = YES;
    }
    return _cover;
}


/**
 *  实现imageView的拖拽手势调用方法
 *  1、拖拽时，设置遮罩视图的位置更改
 */
- (void)imageVPanAction:(UIPanGestureRecognizer *)panG{
    
    CGPoint curP = [panG locationInView:self];
    
    if (panG.state == UIGestureRecognizerStateBegan) {
        self.beginP = curP;
        self.cover.hidden = NO;
        
    }
    self.cover.frame = CGRectMake(self.beginP.x, self.beginP.y, curP.x - self.beginP.x, curP.y - self.beginP.y);
    
    if (panG.state == UIGestureRecognizerStateEnded) {
        self.toolBar.hidden = NO;
        self.toolBar.frame = CGRectMake(self.cover.frame.origin.x, CGRectGetMaxY(self.cover.frame), kToorBarW, kToorBarH);
    }
}

/**
 *  实现遮罩视图拖拽手势调用方法
 *  改变遮罩视图位置，拖拽时.
 */
- (void)coverPanAction:(UIPanGestureRecognizer *)panG{
    
    CGPoint curP = [panG translationInView:self.cover];
    
    self.cover.transform = CGAffineTransformTranslate(self.cover.transform, curP.x, curP.y);
    // 复位
    [panG setTranslation:CGPointZero inView:self.cover];
}

/**
 *  点击了工具类上的裁剪按钮，将遮罩视图范围内的内容裁剪下来.
 */
- (void)clipAction{
    
    if (self.cover.hidden == YES) {
        return;
    }
    
    self.cover.hidden = YES;
    
    // 裁剪
    // 开启位图上下文
    UIGraphicsBeginImageContextWithOptions(self.frame.size, NO, 0);
    
    // 设置裁剪区域
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.cover.frame];
    [path addClip];
    
    // 绘制图片
    [self.layer renderInContext:UIGraphicsGetCurrentContext()];
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    // 关闭位图上下文
    UIGraphicsEndImageContext();
    
    self.image = image;
}

/**
 *  撤销（隐藏遮罩视图和工具条，还原初始图片）
 */
- (void)doAgainClip{
    if (self.image != nil) {
        
        self.cover.hidden = YES;
        self.toolBar.hidden = YES;
        self.image = self.oraginImage;
    }
}

/**
 *  重写父类方法，记录需要裁剪的图片，以便撤销操作时还原
 */
- (nonnull instancetype)initWithImage:(nullable UIImage *)image{
    
    NSLog(@"%s", __func__);
    self.oraginImage = image;
    return [super initWithImage:image];
}
@end

• 2.使用

#import "ViewController.h"
#import "ClipImageView.h"

@implementation ViewController

- (BOOL)prefersStatusBarHidden{
    return YES;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    /**
        1、添加imageView (代码实现方式)
     */
     UIImage *image =  [UIImage imageNamed:@"火影"];
     ClipImageView *clipImageView = [[ClipImageView alloc] initWithImage:image];
    clipImageView.frame = self.view.bounds;
     
     [self.view addSubview:clipImageView];

    /**
     2、可以在xib中配置，UIImageView的custom class属性为ClipImageView，然后设置Image属性，即可进行裁剪图片了.
     */
}
@end