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