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

最新推荐文章于 2024-03-17 09:57:19 发布

weixin_33858336

最新推荐文章于 2024-03-17 09:57:19 发布

阅读量353

点赞数

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、一些注意点