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庫實現的，感謝作者。