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

 

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

二、效果图：

 

 

 

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

先放一张大概解释图：

 

 

 

其中：
区域一、表示边框拖动范围
区域二、表示边角拖动范围
区域三、表示裁剪框移动手势范围+捏合手势操做范围
区域四、内部裁剪按钮范围（固然这个是能够根据裁剪框位置变更的）

四、属性介绍

控制属性

@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 

五、如何使用
使用比较简单，可基于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]; } 

六、一些注意点

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

七、源码获取
代码都在个人测试demo

 

 

GitHub

 

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