iOS實現(xiàn)動態(tài)區(qū)域裁剪圖片

裁剪圖片功能在很多上傳圖片的場景里都需要用到，一方面應用服務器可能對圖片的尺寸大小有限制，因而希望上傳的圖片都是符合規(guī)定的，另一方面，用戶可能希望只上傳圖片中的部分內容，突出圖片中關鍵的信息。而為了滿足用戶多種多樣的裁剪需求，就需要裁剪圖片時能支持由用戶動態(tài)地改變裁剪范圍、裁剪尺寸等。

源代碼倉庫

動態(tài)裁剪圖片的基本過程大致可以分為以下幾步

顯示圖片與裁剪區(qū)域
支持移動和縮放圖片
支持手勢改變裁剪區(qū)域
進行圖片裁剪并獲得裁剪后的圖片

顯示圖片與裁剪區(qū)域

顯示圖片

在裁剪圖片之前，首先我們要在頁面上顯示待裁剪的圖片，如下圖所示

image.png

這一步比較簡單，配置一個 UIImageView 來放置圖片即可。但是要注意一點，UIImageView 有多種 contentMode，最常見有三種

UIViewContentModeScaleToFill
UIViewContentModeScaleAspectFit
UIViewContentModeScaleAspectFill

三者區(qū)別可以看下面的比較

UIViewContentModeScaleToFill

image.png

UIViewContentModeScaleAspectFit

image.png

UIViewContentModeScaleAspectFill

image.png

可以看出，ScaleToFill 會改變圖片的長寬比例來鋪滿整個 UIImageView，ScaleAspectFill 則會保持圖片比例來鋪滿，從而會有部分圖片內容超出 UIImageView 區(qū)域的情況，而 ScaleAspectFit 則會保證圖片比例不變，同時圖片內容都顯示在 UIImageView 中，即使無法鋪滿 UIImageView。

因此不同顯示模式會影響到我們最終顯示到屏幕上的圖片的樣子，而在裁剪過程中最理想的放置圖片的模式則是，圖片的短邊剛好鋪滿裁剪區(qū)域的短邊，而長邊至少不會小于裁剪區(qū)域的長邊，這就要求我們要考慮裁剪區(qū)域的長寬來放置我們的圖片。

裁剪區(qū)域

接下來我們要放置我們的裁剪區(qū)域，它的樣子如下所示

image.png

裁剪區(qū)域本身就是在 UIImageView 上放上一層 UIView，再在 UIView 上繪制出一個白邊框的方格 Layer。

首先自定義一個 CAShapeLayer

#import <QuartzCore/QuartzCore.h>

@interface YasicClipAreaLayer : CAShapeLayer

@property(assign, nonatomic) NSInteger cropAreaLeft;
@property(assign, nonatomic) NSInteger cropAreaTop;
@property(assign, nonatomic) NSInteger cropAreaRight;
@property(assign, nonatomic) NSInteger cropAreaBottom;

- (void)setCropAreaLeft:(NSInteger)cropAreaLeft CropAreaTop:(NSInteger)cropAreaTop CropAreaRight:(NSInteger)cropAreaRight CropAreaBottom:(NSInteger)cropAreaBottom;


@end

@implementation YasicClipAreaLayer

- (instancetype)init
{
    self = [super init];
    if (self) {
        _cropAreaLeft = 50;
        _cropAreaTop = 50;
        _cropAreaRight = SCREEN_WIDTH - self.cropAreaLeft;
        _cropAreaBottom = 400;
    }
    return self;
}

- (void)drawInContext:(CGContextRef)ctx
{
    UIGraphicsPushContext(ctx);
    
    CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
    CGContextSetLineWidth(ctx, lineWidth);
    CGContextMoveToPoint(ctx, self.cropAreaLeft, self.cropAreaTop);
    CGContextAddLineToPoint(ctx, self.cropAreaLeft, self.cropAreaBottom);
    CGContextSetShadow(ctx, CGSizeMake(2, 0), 2.0);
    CGContextStrokePath(ctx);
    
    CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
    CGContextSetLineWidth(ctx, lineWidth);
    CGContextMoveToPoint(ctx, self.cropAreaLeft, self.cropAreaTop);
    CGContextAddLineToPoint(ctx, self.cropAreaRight, self.cropAreaTop);
    CGContextSetShadow(ctx, CGSizeMake(0, 2), 2.0);
    CGContextStrokePath(ctx);
    
    CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
    CGContextSetLineWidth(ctx, lineWidth);
    CGContextMoveToPoint(ctx, self.cropAreaRight, self.cropAreaTop);
    CGContextAddLineToPoint(ctx, self.cropAreaRight, self.cropAreaBottom);
    CGContextSetShadow(ctx, CGSizeMake(-2, 0), 2.0);
    CGContextStrokePath(ctx);
    
    CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
    CGContextSetLineWidth(ctx, lineWidth);
    CGContextMoveToPoint(ctx, self.cropAreaLeft, self.cropAreaBottom);
    CGContextAddLineToPoint(ctx, self.cropAreaRight, self.cropAreaBottom);
    CGContextSetShadow(ctx, CGSizeMake(0, -2), 2.0);
    CGContextStrokePath(ctx);
    
    UIGraphicsPopContext();
}

- (void)setCropAreaLeft:(NSInteger)cropAreaLeft
{
    _cropAreaLeft = cropAreaLeft;
    [self setNeedsDisplay];
}

- (void)setCropAreaTop:(NSInteger)cropAreaTop
{
    _cropAreaTop = cropAreaTop;
    [self setNeedsDisplay];
}

- (void)setCropAreaRight:(NSInteger)cropAreaRight
{
    _cropAreaRight = cropAreaRight;
    [self setNeedsDisplay];
}

- (void)setCropAreaBottom:(NSInteger)cropAreaBottom
{
    _cropAreaBottom = cropAreaBottom;
    [self setNeedsDisplay];
}

- (void)setCropAreaLeft:(NSInteger)cropAreaLeft CropAreaTop:(NSInteger)cropAreaTop CropAreaRight:(NSInteger)cropAreaRight CropAreaBottom:(NSInteger)cropAreaBottom
{
    _cropAreaLeft = cropAreaLeft;
    _cropAreaRight = cropAreaRight;
    _cropAreaTop = cropAreaTop;
    _cropAreaBottom = cropAreaBottom;
    
    [self setNeedsDisplay];
}

@end

這里 layer 有幾個屬性 cropAreaLeft、cropAreaRight、cropAreaTop、cropAreaBottom，從命名上可以看出這幾個屬性定義了這個 layer 上繪制的白邊框裁剪區(qū)域的坐標信息。還暴露了一個方法用于配置這四個屬性。

然后在 CAShapeLayer 內部，重點在于復寫 drawInContext 方法，這個方法負責直接在圖層上繪圖，復寫的方法主要做的事情是根據(jù)上面四個屬性 cropAreaLeft、cropAreaRight、cropAreaTop、cropAreaBottom 繪制出封閉的四條線，這樣就能表示裁剪區(qū)域的邊界了。

要注意的是 drawInContext 方法不能手動顯示調用，必須通過調用 setNeedsDisplay 或者 setNeedsDisplayInRect 讓系統(tǒng)自動調該方法。

在裁剪頁面里，我們放置了一個 cropView，然后將自定義的 CAShaplayer 加入到這個 view 上

    self.cropView.layer.sublayers = nil;
    YasicClipAreaLayer * layer = [[YasicClipAreaLayer alloc] init];
    
    CGRect cropframe = CGRectMake(self.cropAreaX, self.cropAreaY, self.cropAreaWidth, self.cropAreaHeight);
    UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:self.cropView.frame cornerRadius:0];
    UIBezierPath * cropPath = [UIBezierPath bezierPathWithRect:cropframe];
    [path appendPath:cropPath];
    layer.path = path.CGPath;
    
    layer.fillRule = kCAFillRuleEvenOdd;
    layer.fillColor = [[UIColor blackColor] CGColor];
    layer.opacity = 0.5;
    
    layer.frame = self.cropView.bounds;
    [layer setCropAreaLeft:self.cropAreaX CropAreaTop:self.cropAreaY CropAreaRight:self.cropAreaX + self.cropAreaWidth CropAreaBottom:self.cropAreaY + self.cropAreaHeight];
    [self.cropView.layer addSublayer:layer];
    [self.view bringSubviewToFront:self.cropView];

這里主要是為了用自定義的 CAShapelayer 產(chǎn)生出空心遮罩的效果，從而出現(xiàn)中心的裁剪區(qū)域高亮而四周非裁剪區(qū)域有蒙層的效果，示意圖如下

image.png

所以首先確定了 cashapelayer 的大小為 cropview 的大小，生成一個對應的 UIBezierPath，然后根據(jù)裁剪區(qū)域的大小（由 self.cropAreaX, self.cropAreaY, self.cropAreaWidth, self.cropAreaHeight 確定）生成空心遮罩的內圈 UIBezierPath，

CGRect cropframe = CGRectMake(self.cropAreaX, self.cropAreaY, self.cropAreaWidth, self.cropAreaHeight);
    UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:self.cropView.frame cornerRadius:0];
    UIBezierPath * cropPath = [UIBezierPath bezierPathWithRect:cropframe];
    [path appendPath:cropPath];
    layer.path = path.CGPath;

然后將這個 path 配置給 CAShapeLayer，并將 CAShapeLayer 的 fillRule 配置為 kCAFillRuleEvenOdd

    layer.fillRule = kCAFillRuleEvenOdd;
    layer.fillColor = [[UIColor blackColor] CGColor];
    layer.opacity = 0.5;
    layer.frame = self.cropView.bounds;

其中 fillRule 屬性表示使用哪一種算法去判斷畫布上的某區(qū)域是否屬于該圖形“內部”，內部區(qū)域將被填充顏色，主要有兩種方式

kCAFillRuleNonZero，這種算法判斷規(guī)則是，如果從某一點射出任意方向射線，與對應 Layer 交點為 0 則不在 Layer 內，大于 0 則在畫布內

kCAFillRuleEvenOdd 如果從某一點射出任意射線，與對應 Layer 交點為偶數(shù)則在畫布內，否則不在畫布內

再給 CAShapeLayer 設置蒙層顏色為透明度 0.5 的黑色，就可以實現(xiàn)空心蒙層效果了。

最后就是設置 layer 的四個屬性并繪制內邊框的白色邊線。

    [layer setCropAreaLeft:self.cropAreaX CropAreaTop:self.cropAreaY CropAreaRight:self.cropAreaX + self.cropAreaWidth CropAreaBottom:self.cropAreaY + self.cropAreaHeight];
    [self.cropView.layer addSublayer:layer];
    [self.view bringSubviewToFront:self.cropView];

合理放置圖片

到這一步我們正確顯示了圖片，也正確顯示出了裁剪區(qū)域，但是我們沒有將二者的約束關系建立起來，因此可能會出現(xiàn)下面這樣的情況

image.png

可以看到這里由于這張圖片的 width 遠大于 height，因此會在裁剪區(qū)域內出現(xiàn)黑色區(qū)域，這對用戶來說是一種不好的體驗，同時也會影響到我們后面的裁剪步驟，究其原因是因為我們沒有針對裁剪區(qū)域的寬高來放置 UIImageView，我們希望最理想的效果是，能在裁剪區(qū)域內實現(xiàn)類似 UIViewContentModeScaleAspectFill 的效果，也就是圖片保持比例地鋪滿裁剪區(qū)域，并允許部分內容超出裁剪區(qū)域，這就要求

當圖片寬與裁剪區(qū)域寬之比大于圖片高與裁剪區(qū)域高之比時，將圖片高鋪滿裁剪區(qū)域高，圖片寬成比例放大
當圖片高與裁剪區(qū)域高之比大于圖片寬與裁剪區(qū)域寬之比時，將圖片寬鋪滿裁剪區(qū)域寬，圖片高成比例方法

這里我們用到 Masonry 來做這些布局操作

    CGFloat tempWidth = 0.0;
    CGFloat tempHeight = 0.0;
    
    if (self.targetImage.size.width/self.cropAreaWidth <= self.targetImage.size.height/self.cropAreaHeight) {
        tempWidth = self.cropAreaWidth;
        tempHeight = (tempWidth/self.targetImage.size.width) * self.targetImage.size.height;
    } else if (self.targetImage.size.width/self.cropAreaWidth > self.targetImage.size.height/self.cropAreaHeight) {
        tempHeight = self.cropAreaHeight;
        tempWidth = (tempHeight/self.targetImage.size.height) * self.targetImage.size.width;
    }
    
    [self.bigImageView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.cropAreaX - (tempWidth - self.cropAreaWidth)/2);
        make.top.mas_equalTo(self.cropAreaY - (tempHeight - self.cropAreaHeight)/2);
        make.width.mas_equalTo(tempWidth);
        make.height.mas_equalTo(tempHeight);
    }];

可以看到，我們進行了兩步判斷，從而獲得合適的寬高值，然后將圖片進行布局，在自動布局時將圖片中心與裁剪區(qū)域中心重合，最后我們會得到下面的效果圖

image.png

支持移動和縮放圖片

正如上面所講，由于圖片在裁剪區(qū)域內是以類似 UIViewContentModeScaleAspectFill 的方式放置的，很可能出現(xiàn)部分內容溢出裁剪區(qū)域，因此我們要讓圖片能支持動態(tài)移動和縮放，從而使用戶能靈活地裁剪圖片的內容。

具體實現(xiàn)上，我們其實是在 cropview 上加上手勢，間接操作圖片的尺寸和位置，這樣有助于后面我們實現(xiàn)動態(tài)改變裁剪區(qū)域的實現(xiàn)。

縮放功能

這里實現(xiàn)縮放的原理實際是對放置圖片的 UIImageView 的 frame 進行修改，首先我們要記錄下最初的 UIImageView 的 frame

self.originalFrame = CGRectMake(self.cropAreaX - (tempWidth - self.cropAreaWidth)/2, self.cropAreaY - (tempHeight - self.cropAreaHeight)/2, tempWidth, tempHeight);

然后為 cropView 添加手勢

    // 捏合手勢
    UIPinchGestureRecognizer *pinGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handleCenterPinGesture:)];
    [self.view addGestureRecognizer:pinGesture];

然后是手勢處理函數(shù)

-(void)handleCenterPinGesture:(UIPinchGestureRecognizer *)pinGesture
{
    CGFloat scaleRation = 3;
    UIView * view = self.bigImageView;
    
    // 縮放開始與縮放中
    if (pinGesture.state == UIGestureRecognizerStateBegan || pinGesture.state == UIGestureRecognizerStateChanged) {
        // 移動縮放中心到手指中心
        CGPoint pinchCenter = [pinGesture locationInView:view.superview];
        CGFloat distanceX = view.frame.origin.x - pinchCenter.x;
        CGFloat distanceY = view.frame.origin.y - pinchCenter.y;
        CGFloat scaledDistanceX = distanceX * pinGesture.scale;
        CGFloat scaledDistanceY = distanceY * pinGesture.scale;
        CGRect newFrame = CGRectMake(view.frame.origin.x + scaledDistanceX - distanceX, view.frame.origin.y + scaledDistanceY - distanceY, view.frame.size.width * pinGesture.scale, view.frame.size.height * pinGesture.scale);
        view.frame = newFrame;
        pinGesture.scale = 1;
    }
    
    // 縮放結束
    if (pinGesture.state == UIGestureRecognizerStateEnded) {
        CGFloat ration =  view.frame.size.width / self.originalFrame.size.width;
        
        // 縮放過大
        if (ration > 5) {
            CGRect newFrame = CGRectMake(0, 0, self.originalFrame.size.width * scaleRation, self.originalFrame.size.height * scaleRation);
            view.frame = newFrame;
        }
        
        // 縮放過小
        if (ration < 0.25) {
            view.frame = self.originalFrame;
        }
        // 對圖片進行位置修正
        CGRect resetPosition = CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, view.frame.size.height);
        
        if (resetPosition.origin.x >= self.cropAreaX) {
            resetPosition.origin.x = self.cropAreaX;
        }
        if (resetPosition.origin.y >= self.cropAreaY) {
            resetPosition.origin.y = self.cropAreaY;
        }
        if (resetPosition.size.width + resetPosition.origin.x < self.cropAreaX + self.cropAreaWidth) {
            CGFloat movedLeftX = fabs(resetPosition.size.width + resetPosition.origin.x - (self.cropAreaX + self.cropAreaWidth));
            resetPosition.origin.x += movedLeftX;
        }
        if (resetPosition.size.height + resetPosition.origin.y < self.cropAreaY + self.cropAreaHeight) {
            CGFloat moveUpY = fabs(resetPosition.size.height + resetPosition.origin.y - (self.cropAreaY + self.cropAreaHeight));
            resetPosition.origin.y += moveUpY;
        }
        view.frame = resetPosition;
        
        // 對圖片縮放進行比例修正，防止過小
        if (self.cropAreaX < self.bigImageView.frame.origin.x
            || ((self.cropAreaX + self.cropAreaWidth) > self.bigImageView.frame.origin.x + self.bigImageView.frame.size.width)
            || self.cropAreaY < self.bigImageView.frame.origin.y
            || ((self.cropAreaY + self.cropAreaHeight) > self.bigImageView.frame.origin.y + self.bigImageView.frame.size.height)) {
            view.frame = self.originalFrame;
        }
    }
}

在手勢處理時，要注意，為了能跟隨用戶捏合手勢的中心進行縮放，我們要在手勢過程中移動縮放中心到手指中心，這里我們判斷了 pinGesture 的 state 來確定手勢開始、進行中和結束階段。

    if (pinGesture.state == UIGestureRecognizerStateBegan || pinGesture.state == UIGestureRecognizerStateChanged) {
        // 移動縮放中心到手指中心
        CGPoint pinchCenter = [pinGesture locationInView:view.superview];
        CGFloat distanceX = view.frame.origin.x - pinchCenter.x;
        CGFloat distanceY = view.frame.origin.y - pinchCenter.y;
        CGFloat scaledDistanceX = distanceX * pinGesture.scale;
        CGFloat scaledDistanceY = distanceY * pinGesture.scale;
        CGRect newFrame = CGRectMake(view.frame.origin.x + scaledDistanceX - distanceX, view.frame.origin.y + scaledDistanceY - distanceY, view.frame.size.width * pinGesture.scale, view.frame.size.height * pinGesture.scale);
        view.frame = newFrame;
        pinGesture.scale = 1;
    }

pinchCenter 就是捏合手勢的中心，我們獲取到當前圖片 view 的 frame，然后計算當前 view 與手勢中心的 x、y 坐標差，再根據(jù)手勢縮放值 scale，創(chuàng)建出新的 frame

        CGRect newFrame = CGRectMake(view.frame.origin.x + scaledDistanceX - distanceX, view.frame.origin.y + scaledDistanceY - distanceY, view.frame.size.width * pinGesture.scale, view.frame.size.height * pinGesture.scale);

這個 frame 的中心坐標就在縮放手勢的中心，將新的 frame 賦值給圖片 view，從而實現(xiàn)依據(jù)手勢中心進行縮放的效果。

而在手勢結束階段，我們要對圖片縮放進行邊界保護，既不能放大過大，也不能縮小過小。

CGFloat ration =  view.frame.size.width / self.originalFrame.size.width;
        
        // 縮放過大
        if (ration > 5) {
            CGRect newFrame = CGRectMake(0, 0, self.originalFrame.size.width * scaleRation, self.originalFrame.size.height * scaleRation);
            view.frame = newFrame;
        }
        
        // 縮放過小
        if (ration < 0.25) {
            view.frame = self.originalFrame;
        }

同時縮放后如果圖片與裁剪區(qū)域出現(xiàn)了空白區(qū)域，還要對圖片的位置進行修正以保證圖片始終是覆蓋全裁剪區(qū)域的。

// 對圖片進行位置修正
        CGRect resetPosition = CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, view.frame.size.height);
        
        if (resetPosition.origin.x >= self.cropAreaX) {
            resetPosition.origin.x = self.cropAreaX;
        }
        if (resetPosition.origin.y >= self.cropAreaY) {
            resetPosition.origin.y = self.cropAreaY;
        }
        if (resetPosition.size.width + resetPosition.origin.x < self.cropAreaX + self.cropAreaWidth) {
            CGFloat movedLeftX = fabs(resetPosition.size.width + resetPosition.origin.x - (self.cropAreaX + self.cropAreaWidth));
            resetPosition.origin.x += movedLeftX;
        }
        if (resetPosition.size.height + resetPosition.origin.y < self.cropAreaY + self.cropAreaHeight) {
            CGFloat moveUpY = fabs(resetPosition.size.height + resetPosition.origin.y - (self.cropAreaY + self.cropAreaHeight));
            resetPosition.origin.y += moveUpY;
        }
        view.frame = resetPosition;

這里我們通過生成當前圖片的 CGRect，與裁剪區(qū)域的邊界進行如下比較

圖片左邊線大于裁剪區(qū)域左邊線時圖片移動到裁剪區(qū)域 x 值
圖片上邊線大于裁剪區(qū)域上邊線時圖片移動到裁剪區(qū)域 y 值
圖片右邊線小于裁剪區(qū)域右邊線時圖片右貼裁剪區(qū)域右邊線
圖片下邊線小于裁剪區(qū)域右邊線時圖片下貼裁剪區(qū)域下邊線

進行這番操作后，可能會出現(xiàn)由于圖片過小無法鋪滿裁剪區(qū)域的情況，如下圖所示

image.png

因此還需要再次對圖片尺寸進行修正

        // 對圖片縮放進行比例修正，防止過小
        if (self.cropAreaX < self.bigImageView.frame.origin.x
            || ((self.cropAreaX + self.cropAreaWidth) > self.bigImageView.frame.origin.x + self.bigImageView.frame.size.width)
            || self.cropAreaY < self.bigImageView.frame.origin.y
            || ((self.cropAreaY + self.cropAreaHeight) > self.bigImageView.frame.origin.y + self.bigImageView.frame.size.height)) {
            view.frame = self.originalFrame;
        }

這樣就實現(xiàn)了縮放功能。

移動功能

相比于縮放，移動功能實現(xiàn)就簡單了，只需要在 cropview 上添加 UIPanGestureRecognizer，然后在回調方法里拿到需要移動的距離，修改 UIImageView 的 center 就可以了。

    CGPoint translation = [panGesture translationInView:view.superview];
    [view setCenter:CGPointMake(view.center.x + translation.x, view.center.y + translation.y)];
                [panGesture setTranslation:CGPointZero inView:view.superview];

但是同樣為了保證移動后的圖片不會與裁剪區(qū)域出現(xiàn)空白甚至是超出裁剪區(qū)域，這里更新了圖片位置后，在手勢結束時還要對圖片進行位置修正

                CGRect currentFrame = view.frame;
                
                if (currentFrame.origin.x >= self.cropAreaX) {
                    currentFrame.origin.x = self.cropAreaX;
                    
                }
                if (currentFrame.origin.y >= self.cropAreaY) {
                    currentFrame.origin.y = self.cropAreaY;
                }
                if (currentFrame.size.width + currentFrame.origin.x < self.cropAreaX + self.cropAreaWidth) {
                    CGFloat movedLeftX = fabs(currentFrame.size.width + currentFrame.origin.x - (self.cropAreaX + self.cropAreaWidth));
                    currentFrame.origin.x += movedLeftX;
                }
                if (currentFrame.size.height + currentFrame.origin.y < self.cropAreaY + self.cropAreaHeight) {
                    CGFloat moveUpY = fabs(currentFrame.size.height + currentFrame.origin.y - (self.cropAreaY + self.cropAreaHeight));
                    currentFrame.origin.y += moveUpY;
                }
                [UIView animateWithDuration:0.3 animations:^{
                    
                    [view setFrame:currentFrame];
                }];

可以看到，這里做的位置檢查與縮放時做的檢查是一樣的，只是由于不會改變圖片尺寸所以這里不需要進行尺寸修正。

支持手勢改變裁剪區(qū)域

接下來就是動態(tài)裁剪圖片的核心內容了，其實原理也很簡單，只要在上面的移動手勢處理函數(shù)中，進行一些判斷，決定是移動圖片位置還是改變裁剪區(qū)域，也就是自定義的 CAShapeLayer 的繪制方框的尺寸就可以了。

首先我們定義一個枚舉，用來表示當前應當操作的是圖片還是裁剪區(qū)域的邊線

typedef NS_ENUM(NSInteger, ACTIVEGESTUREVIEW) {
    CROPVIEWLEFT,
    CROPVIEWRIGHT,
    CROPVIEWTOP,
    CROPVIEWBOTTOM,
    BIGIMAGEVIEW
};

它們分別表示觸發(fā)對象為裁剪區(qū)域左邊線、右邊線、上邊線、下邊線以及 UIImageView

然后我們定義一個枚舉屬性

@property(assign, nonatomic) ACTIVEGESTUREVIEW activeGestureView;

判斷操作對象的標準是當前的手勢所觸發(fā)的位置是在邊線上還是在非邊線上，因此我們需要知道手勢觸發(fā)時的坐標，要知道這一點就需要我們繼承一個 UIPanGestureRecognizer 并覆寫一些方法

@interface YasicPanGestureRecognizer : UIPanGestureRecognizer

@property(assign, nonatomic) CGPoint beginPoint;
@property(assign, nonatomic) CGPoint movePoint;

-(instancetype)initWithTarget:(id)target action:(SEL)action inview:(UIView*)view;

@end

@interface YasicPanGestureRecognizer()

@property(strong, nonatomic) UIView *targetView;

@end

@implementation YasicPanGestureRecognizer

-(instancetype)initWithTarget:(id)target action:(SEL)action inview:(UIView*)view{
    
    self = [super initWithTarget:target action:action];
    if(self) {
        self.targetView = view;
    }
    return self;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent*)event{
    
    [super touchesBegan:touches withEvent:event];
    UITouch *touch = [touches anyObject];
    self.beginPoint = [touch locationInView:self.targetView];
}

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [super touchesMoved:touches withEvent:event];
    UITouch *touch = [touches anyObject];
    self.movePoint = [touch locationInView:self.targetView];
}

@end

可以看到，我們首先傳入了一個 view，用于將手勢觸發(fā)的位置轉換為 view 中的坐標值。在 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent*)event{ 方法中我們得到了手勢開始時的觸發(fā)點 beginPoint，在 - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event 方法中我們獲得了手勢進行時的觸發(fā)點 movePoint。

自定義完 UIPanGestureRecognizer 后我們將其加到 cropview 上并把 cropview 作為參數(shù)傳給 UIPanGestureRecognizer

    // 拖動手勢
    YasicPanGestureRecognizer *panGesture = [[YasicPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleDynamicPanGesture:) inview:self.cropView];
    [self.cropView addGestureRecognizer:panGesture];

接下來就是處理手勢的函數(shù)，這里我們可以將整個過程分為三個步驟，開始時 -> 進行時 -> 結束時。

手勢開始時

在這里我們要根據(jù)手勢的 beginPoint 判斷觸發(fā)對象是邊線還是 UIImageView

// 開始滑動時判斷滑動對象是 ImageView 還是 Layer 上的 Line
    if (panGesture.state == UIGestureRecognizerStateBegan) {
        if (beginPoint.x >= self.cropAreaX - judgeWidth && beginPoint.x <= self.cropAreaX + judgeWidth && beginPoint.y >= self.cropAreaY && beginPoint.y <= self.cropAreaY + self.cropAreaHeight && self.cropAreaWidth >= 50) {
            self.activeGestureView = CROPVIEWLEFT;
        } else if (beginPoint.x >= self.cropAreaX + self.cropAreaWidth - judgeWidth && beginPoint.x <= self.cropAreaX + self.cropAreaWidth + judgeWidth && beginPoint.y >= self.cropAreaY && beginPoint.y <= self.cropAreaY + self.cropAreaHeight &&  self.cropAreaWidth >= 50) {
            self.activeGestureView = CROPVIEWRIGHT;
        } else if (beginPoint.y >= self.cropAreaY - judgeWidth && beginPoint.y <= self.cropAreaY + judgeWidth && beginPoint.x >= self.cropAreaX && beginPoint.x <= self.cropAreaX + self.cropAreaWidth && self.cropAreaHeight >= 50) {
            self.activeGestureView = CROPVIEWTOP;
        } else if (beginPoint.y >= self.cropAreaY + self.cropAreaHeight - judgeWidth && beginPoint.y <= self.cropAreaY + self.cropAreaHeight + judgeWidth && beginPoint.x >= self.cropAreaX && beginPoint.x <= self.cropAreaX + self.cropAreaWidth && self.cropAreaHeight >= 50) {
            self.activeGestureView = CROPVIEWBOTTOM;
        } else {
            self.activeGestureView = BIGIMAGEVIEW;
            [view setCenter:CGPointMake(view.center.x + translation.x, view.center.y + translation.y)];
            [panGesture setTranslation:CGPointZero inView:view.superview];
        }
    }

手勢進行時

在這里，如果觸發(fā)對象是邊線，則計算邊線需要移動的距離和方向，以及對于邊界條件的限制以防止邊線之間交叉錯位的情況，具體來說就是獲得坐標差值，更新 cropAreaX、cropAreaWidth 等值，然后更新 CAShapeLayer 上的空心蒙層。

如果觸發(fā)對象是 UIImageView 則只需要將其位置進行改變即可。

// 滑動過程中進行位置改變
    if (panGesture.state == UIGestureRecognizerStateChanged) {
        CGFloat diff = 0;
        switch (self.activeGestureView) {
            case CROPVIEWLEFT: {
                diff = movePoint.x - self.cropAreaX;
                if (diff >= 0 && self.cropAreaWidth > 50) {
                    self.cropAreaWidth -= diff;
                    self.cropAreaX += diff;
                } else if (diff < 0 && self.cropAreaX > self.bigImageView.frame.origin.x && self.cropAreaX >= 15) {
                    self.cropAreaWidth -= diff;
                    self.cropAreaX += diff;
                }
                [self setUpCropLayer];
                break;
            }
            case CROPVIEWRIGHT: {
                diff = movePoint.x - self.cropAreaX - self.cropAreaWidth;
                if (diff >= 0 && (self.cropAreaX + self.cropAreaWidth) < MIN(self.bigImageView.frame.origin.x + self.bigImageView.frame.size.width, self.cropView.frame.origin.x + self.cropView.frame.size.width - 15)){
                    self.cropAreaWidth += diff;
                } else if (diff < 0 && self.cropAreaWidth >= 50) {
                    self.cropAreaWidth += diff;
                }
                [self setUpCropLayer];
                break;
            }
            case CROPVIEWTOP: {
                diff = movePoint.y - self.cropAreaY;
                if (diff >= 0 && self.cropAreaHeight > 50) {
                    self.cropAreaHeight -= diff;
                    self.cropAreaY += diff;
                } else if (diff < 0 && self.cropAreaY > self.bigImageView.frame.origin.y && self.cropAreaY >= 15) {
                    self.cropAreaHeight -= diff;
                    self.cropAreaY += diff;
                }
                [self setUpCropLayer];
                break;
            }
            case CROPVIEWBOTTOM: {
                diff = movePoint.y - self.cropAreaY - self.cropAreaHeight;
                if (diff >= 0 && (self.cropAreaY + self.cropAreaHeight) < MIN(self.bigImageView.frame.origin.y + self.bigImageView.frame.size.height, self.cropView.frame.origin.y + self.cropView.frame.size.height - 15)){
                    self.cropAreaHeight += diff;
                } else if (diff < 0 && self.cropAreaHeight >= 50) {
                    self.cropAreaHeight += diff;
                }
                [self setUpCropLayer];
                break;
            }
            case BIGIMAGEVIEW: {
                [view setCenter:CGPointMake(view.center.x + translation.x, view.center.y + translation.y)];
                [panGesture setTranslation:CGPointZero inView:view.superview];
                break;
            }
            default:
                break;
        }
    }

手勢結束時

手勢結束時，我們需要對位置進行修正。如果是裁剪區(qū)域邊線，則要判斷左右、上下邊線之間的距離是否過短，邊線是否超出 UIImageView 的范圍等。如果左右邊線距離過短則設置最小裁剪寬度，如果上線邊線距離過短則設置最小裁剪高度，如果左邊線超出了 UIImageView 左邊線則需要緊貼 UIImageView 的左邊線，并更新裁剪區(qū)域寬度，以此類推。然后更新 CAShapeLayer 上的空心蒙層即可。

如果是 UIImageView 則跟上一節(jié)一樣要保證圖片不會與裁剪區(qū)域出現(xiàn)空白。

    // 滑動結束后進行位置修正
    if (panGesture.state == UIGestureRecognizerStateEnded) {
        switch (self.activeGestureView) {
            case CROPVIEWLEFT: {
                if (self.cropAreaWidth < 50) {
                    self.cropAreaX -= 50 - self.cropAreaWidth;
                    self.cropAreaWidth = 50;
                }
                if (self.cropAreaX < MAX(self.bigImageView.frame.origin.x, 15)) {
                    CGFloat temp = self.cropAreaX + self.cropAreaWidth;
                    self.cropAreaX = MAX(self.bigImageView.frame.origin.x, 15);
                    self.cropAreaWidth = temp - self.cropAreaX;
                }
                [self setUpCropLayer];
                break;
            }
            case CROPVIEWRIGHT: {
                if (self.cropAreaWidth < 50) {
                    self.cropAreaWidth = 50;
                }
                if (self.cropAreaX + self.cropAreaWidth > MIN(self.bigImageView.frame.origin.x + self.bigImageView.frame.size.width, self.cropView.frame.origin.x + self.cropView.frame.size.width - 15)) {
                    self.cropAreaWidth = MIN(self.bigImageView.frame.origin.x + self.bigImageView.frame.size.width, self.cropView.frame.origin.x + self.cropView.frame.size.width - 15) - self.cropAreaX;
                }
                [self setUpCropLayer];
                break;
            }
            case CROPVIEWTOP: {
                if (self.cropAreaHeight < 50) {
                    self.cropAreaY -= 50 - self.cropAreaHeight;
                    self.cropAreaHeight = 50;
                }
                if (self.cropAreaY < MAX(self.bigImageView.frame.origin.y, 15)) {
                    CGFloat temp = self.cropAreaY + self.cropAreaHeight;
                    self.cropAreaY = MAX(self.bigImageView.frame.origin.y, 15);
                    self.cropAreaHeight = temp - self.cropAreaY;
                }
                [self setUpCropLayer];
                break;
            }
            case CROPVIEWBOTTOM: {
                if (self.cropAreaHeight < 50) {
                    self.cropAreaHeight = 50;
                }
                if (self.cropAreaY + self.cropAreaHeight > MIN(self.bigImageView.frame.origin.y + self.bigImageView.frame.size.height, self.cropView.frame.origin.y + self.cropView.frame.size.height - 15)) {
                    self.cropAreaHeight = MIN(self.bigImageView.frame.origin.y + self.bigImageView.frame.size.height, self.cropView.frame.origin.y + self.cropView.frame.size.height - 15) - self.cropAreaY;
                }
                [self setUpCropLayer];
                break;
            }
            case BIGIMAGEVIEW: {
                CGRect currentFrame = view.frame;
                
                if (currentFrame.origin.x >= self.cropAreaX) {
                    currentFrame.origin.x = self.cropAreaX;
                    
                }
                if (currentFrame.origin.y >= self.cropAreaY) {
                    currentFrame.origin.y = self.cropAreaY;
                }
                if (currentFrame.size.width + currentFrame.origin.x < self.cropAreaX + self.cropAreaWidth) {
                    CGFloat movedLeftX = fabs(currentFrame.size.width + currentFrame.origin.x - (self.cropAreaX + self.cropAreaWidth));
                    currentFrame.origin.x += movedLeftX;
                }
                if (currentFrame.size.height + currentFrame.origin.y < self.cropAreaY + self.cropAreaHeight) {
                    CGFloat moveUpY = fabs(currentFrame.size.height + currentFrame.origin.y - (self.cropAreaY + self.cropAreaHeight));
                    currentFrame.origin.y += moveUpY;
                }
                [UIView animateWithDuration:0.3 animations:^{
                    
                    [view setFrame:currentFrame];
                }];
                break;
            }
            default:
                break;
        }
    }

進行圖片裁剪并獲得裁剪后的圖片

最后一步就是對圖片進行裁剪了。首先確定對圖片的縮放尺寸 imageScale

    CGFloat imageScale = MIN(self.bigImageView.frame.size.width/self.targetImage.size.width, self.bigImageView.frame.size.height/self.targetImage.size.height);

然后將 cropView 的裁剪區(qū)域對應到 UIImageView 上，再除以縮放值，即可得到對應 UIImage 上需要裁剪的區(qū)域

    CGFloat cropX = (self.cropAreaX - self.bigImageView.frame.origin.x)/imageScale;
    CGFloat cropY = (self.cropAreaY - self.bigImageView.frame.origin.y)/imageScale;
    CGFloat cropWidth = self.cropAreaWidth/imageScale;
    CGFloat cropHeight = self.cropAreaHeight/imageScale;
    CGRect cropRect = CGRectMake(cropX, cropY, cropWidth, cropHeight);

最后調用 CoreGraphic 的方法，將圖片對應區(qū)域的數(shù)據(jù)取出來生成新的圖片，就是我們需要的裁剪后的圖片了。

    CGImageRef sourceImageRef = [self.targetImage CGImage];
    CGImageRef newImageRef = CGImageCreateWithImageInRect(sourceImageRef, cropRect);
    UIImage *newImage = [UIImage imageWithCGImage:newImageRef];

GitHub 代碼地址

最后編輯于：2017.11.29 14:12:47

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,825評論 6贊 546
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 99,814評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
開封第一講書人閱讀 178,980評論 0贊 384
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 64,064評論 1贊 319
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,779評論 6贊 414
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 56,109評論 1贊 330
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 44,099評論 3贊 450
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 43,287評論 0贊 291
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 49,799評論 1贊 338
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,515評論 3贊 361
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,750評論 1贊 375
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,221評論 5贊 365
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 44,933評論 3贊 351
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,327評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,667評論 1贊 296
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,492評論 3贊 400
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,703評論 2贊 380

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

iOS實現(xiàn)動態(tài)區(qū)域裁剪圖片

iOS實現(xiàn)動態(tài)區(qū)域裁剪圖片

顯示圖片與裁剪區(qū)域

顯示圖片

裁剪區(qū)域

合理放置圖片

支持移動和縮放圖片

縮放功能

移動功能

支持手勢改變裁剪區(qū)域

進行圖片裁剪并獲得裁剪后的圖片

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

iOS實現(xiàn)動態(tài)區(qū)域裁剪圖片

顯示圖片與裁剪區(qū)域

顯示圖片

裁剪區(qū)域

合理放置圖片

支持移動和縮放圖片

縮放功能

移動功能

支持手勢改變裁剪區(qū)域

進行圖片裁剪并獲得裁剪后的圖片

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频