iOS实现图片裁剪功能，基于TKImageView完善与讲解

1、功能需求：
需要实现图片区域裁剪功能。

2、效果图：

 

 

3、实现原理：
本来想自己实现的，刚好看到一个比较好的库：TKImageView，下载好研究了下，发现基本都能满足我的需求，而且封装的也比较好。
于是自己就顺便仔细研读了下源码，并且稍微修改了下代码，增加了一些必要的注释（原文真的一清二白的注释啊），同时增加了一个内部裁剪按钮功能。

先放一张大概解释图：

 

其中：
区域1、表示边框拖动范围
区域2、表示边角拖动范围
区域3、表示裁剪框移动手势范围+捏合手势操作范围
区域4、内部裁剪按钮范围（当然这个是可以根据裁剪框位置变动的）

4、属性介绍

控制属性

@interface TKImageView : UIView
//需要裁剪的背景图
@property (strong, nonatomic) UIImage *toCropImage;

/* -----------------自定义属性--------------------------- */
//是否允许手指捏合,默认NO （如果需要，必须使用时设置yes）
@property (assign, nonatomic) BOOL needScaleCrop;

//是否允许拖动边框,默认yes
@property (assign, nonatomic) BOOL showMidLines;

//裁剪框的border宽度是否计算在裁剪框长宽里面，默认no，一般默认值即可。
@property (assign, nonatomic) BOOL cornerBorderInImage;

//是否显示内部的裁剪按钮，默认no （设置yes，会在裁剪框旁边显示裁剪和取消按钮）
//一般在ipone横屏或pad上使用时，放开这个比较好，不然iphone竖屏，屏幕太小，更适合外部设置裁剪按钮
@property (nonatomic,assign) BOOL  showInsideCropButton;

//裁剪框 宽高比（比如设置0.5，就是一个竖直的长方形），默认0（任意形状）
//注意：设置了这个，showMidLines就无效了=不能拖动边，只能拖角进行缩放
@property (assign, nonatomic) CGFloat cropAspectRatio;

//裁剪框最小间距，默认10
//注意：这里的最小要排除掉边角点击区域view的宽度，所以真实的最小裁剪框边长 = 2*cropAreaCornerWidth+minSpace）
@property (assign, nonatomic) CGFloat minSpace;

//初始裁剪框大小比例（用占比图片长宽比得出宽高）,默认0.5
@property (assign, nonatomic) CGFloat initialScaleFactor;

//遮罩层透明度，默认0.6
@property (assign, nonatomic) CGFloat maskAlpha;

颜色宽度等基本属性

/* -----------------颜色、宽度属性--------------------------- */
//裁剪边框颜色
@property (strong, nonatomic) UIColor *cropAreaBorderLineColor;
//裁剪边框宽度
@property (assign, nonatomic) CGFloat cropAreaBorderLineWidth;
//4个边角线颜色 （这个外贴着边角显示两条边）
@property (strong, nonatomic) UIColor *cropAreaCornerLineColor;
//4个边角线宽度
@property (assign, nonatomic) CGFloat cropAreaCornerLineWidth;
//4个边角点击区域宽度
@property (assign, nonatomic) CGFloat cropAreaCornerWidth;
//4个边角点击区域高度
@property (assign, nonatomic) CGFloat cropAreaCornerHeight;
//4条边中间显示的线宽（这个线外贴着边框线中间显示）
@property (assign, nonatomic) CGFloat cropAreaMidLineWidth;
//4条边中间显示的线高
@property (assign, nonatomic) CGFloat cropAreaMidLineHeight;
//4条边中间显示的线颜色
@property (strong, nonatomic) UIColor *cropAreaMidLineColor;
//裁剪按钮的宽高，默认：边角点击区域高宽（只有设置showInsideCropButton = yes 才有效）
@property (nonatomic, assign) CGFloat  btnCropWH;

获取最终裁剪图片方法

/* -----------------获取截取图片--------------------------- */
//最终截取的图片
- (UIImage *)currentCroppedImage;

此外，我添加了内部裁剪按钮，适用于全屏图片或大屏区域操作（横屏或pad等）

/**
 裁剪按钮代理事件
 */
@protocol TKImageViewDelegate <NSObject>
- (void)TKImageViewFinish:(UIImage *)cropImage; //完成裁剪
- (void)TKImageViewCancel;      //取消裁剪
@end

5、如何使用
使用比较简单，可基于view或控制器上添加此试图即可。

- (void)setUpTKImageView {
    self.tkImageView = [[TKImageView alloc] initWithFrame:self.view.bounds];
    _tkImageView.toCropImage = _image;          //设置底图（必须属性!）

    _tkImageView.needScaleCrop = YES;           //允许手指捏和缩放裁剪框
    _tkImageView.showInsideCropButton = YES;    //允许内部裁剪按钮
    _tkImageView.btnCropWH = 30;                //内部裁剪按钮宽高，有默认值，不设也没事
    _tkImageView.delegate = self;               //需要实现内部裁剪代理事件
    [self.view addSubview:_tkImageView];

}

6、一些注意点

• 使用时，toCropImage属性必须设置，其他都是可选属性
• 捏合手势默认关闭，若需要，必须设置yes开启
• 内部裁剪按钮默认关闭，若需要，必须开启并设置好代理
• 其他属性，上文都有详细注释，基本能明白每个属性含义

7、源码获取
代码都在我的测试demo

 

 

GitHub

8、最后鸣谢
此文是基于TKImageView库实现的，感谢作者。