iOS繪圖 - UIImage的一些簡單操作

阿新 • • 發佈：2020-10-16

在iOS繪圖 - 基礎篇中我們知道有一種獲取上下文的方法是UIGraphicsBeginImageContextWithOptions，本文主要在圖片型別上下文中對圖片進行操作，具體實現的功能：
- 1.生成圖片
- 2.繪製圖片到檢視
- 3.新增水印
- 4.擷取螢幕或者相應view
- 5.圖片擦除
- 6.圖片裁剪

具體的方法使用就在方法的介紹中解釋吧，為了程式碼的複用，對上述方法進行了封裝，放在UIImage的類別中，方便今後使用。
圖片操作的基本步驟
1.開啟圖形上下文
2.繪製圖片
- 使用drowInRect或者drawAtPoint繪製圖片(區別在哪兒？你可以先想一想)
 drawInRect是以rect作為圖片繪製的區域，圖片是以填充的方式被繪製在當前區域圖片的大小，rect的寬高比和原圖片的寬高比不同時會造成圖片的變形
 drowAtPoint是以point作為圖片繪製的起點，繪製的圖片的大小依然是原圖片的大小，不會使圖片變形
 
- 將layer渲染在當前上下文
3.從當前上下文獲取新的圖片
4.關閉上下文
1.生成圖片，這裡我們生成特定顏色的圖片
+ (UIImage *)createImageColor:(UIColor *)color size:(CGSize)size {
    //開啟圖形上下文
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    //繪製顏色區域
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, size.width, size.height)];
    [color setFill];
    [path fill];
 
//    CGContextRef ctx = UIGraphicsGetCurrentContext();
//    CGContextSetFillColorWithColor(ctx, color.CGColor);
//    CGContextFillRect(ctx, CGRectMake(0, 0, size.width, size.height));
    //從圖形上下文獲取圖片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    //關閉圖形上下文
    UIGraphicsEndImageContext();
    
     
return newImage;
}
2.繪製圖片，可以設定繪製的圖片比例或者指定壓縮後的圖片的大小，可以當做壓縮圖片使用
 這裡我使用了drawInRect有興趣的可以使用drowAtPoint，看看效果
+ (UIImage *)scaleImage:(UIImage *)image sclae:(CGFloat)scale {
    //確定壓縮後的size
    CGFloat scaleWidth = image.size.width * scale;
    CGFloat scaleHeight = image.size.height * scale;
    CGSize scaleSize = CGSizeMake(scaleWidth, scaleHeight);
    //開啟圖形上下文
    UIGraphicsBeginImageContext(scaleSize);
    //繪製圖片
    [image drawInRect:CGRectMake(0, 0, scaleWidth, scaleHeight)];
    //從圖形上下文獲取圖片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    //關閉圖形上下文
    UIGraphicsEndImageContext();
    return newImage;
}
3.繪製水印
文字水印
可能你在新增文字水印之後，顯示文字字型並不是你設定的字型大小，這是因為畫布的size是圖片的size，繪製後的圖片被新增到ImageView上時可能被壓縮或者放大，文字也就會發生變化。

+ (UIImage *)waterAtImage:(UIImage *)image
                   text:(NSString *)text
                  point:(CGPoint)point
             attributes:(NSDictionary *)attributes {
    //開啟圖形上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    //繪製圖片
    [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    //新增文字
    [text drawAtPoint:point withAttributes:attributes];
    //獲取圖片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    //關閉上下文
    UIGraphicsEndImageContext();
    return newImage;
}
圖片水印
+ (UIImage *)waterAtImage:(UIImage *)image
             waterImgae:(UIImage *)waterImage
                   rect:(CGRect)rect {
    //開啟圖形上下文
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    //繪製原圖片
    [image drawInRect:CGRectMake(0, 0, image.size.width, image.size.width)];
    //繪製水印
    [waterImage drawInRect:rect];
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}
4.截圖
1.建立圖形上下文
2.將view的layer渲染到圖形上下文
3.從圖形上下文得到圖片
4.關閉影象上下文
//當然如果你只是需要某個view的快照，在iOS7之後你可以使用[view snapshotViewAfterScreenUpdates:NO];來獲得,比如實現長按拖拽cell的操作

+ (void)cutView:(UIView *)view success:(void(^)(UIImage *image))success {
    //開啟圖形上下文
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, 0);
    //獲取當前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //渲染
    [view.layer renderInContext:ctx];
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    success(newImage);
}
5.擦除
1.設定兩張圖片，上方為我們要擦除的圖片，後方為需要展示的圖片
2.設定擦除的區域的大小和位置

+ (UIImage *)wipeView:(UIView *)view
                point:(CGPoint)point
                 size:(CGSize)size {
    //開啟圖形上下文
    UIGraphicsBeginImageContext(view.bounds.size);
    //獲取當前上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //渲染
    [view.layer renderInContext:ctx];
    //計算擦除的rect
    CGFloat clipX = point.x - size.width/2;
    CGFloat clipY = point.y - size.height/2;
    CGRect clipRect = CGRectMake(clipX, clipY, size.width, size.height);
    //將該區域設定為透明
    CGContextClearRect(ctx, clipRect);
    //獲取新的圖片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    return newImage;
}
擦除
6.圖片裁剪
矩形區域的裁剪，這裡我們就利用drowAtPoint的特性去進行裁剪
1.假設一張圖片的size是(600,600)
2.imageView的size是(300,300)
3.我們選擇的裁剪區域是(10,10,150,150)
4.而我們為了能夠保持原來圖片的解析度，在圖片不拉伸的情況下在原圖片上進行剪裁，所以實際我們在圖片上的剪裁區域就是(20,20,300,300)
5.圖片繪製在畫布上的點就是(-20,-20),這樣我們不需要進行裁剪就能獲得我們想要得到的圖片啦

+ (UIImage *)cutImage:(UIImage *)image
        imageViewSize:(CGSize)size
             clipRect:(CGRect)rect {
    //圖片大小和實際顯示大小的比例
    CGFloat scale_width = image.size.width/size.width;
    CGFloat scale_height = image.size.height/size.height;
    //實際剪下區域
    CGRect clipRect = CGRectMake(rect.origin.x * scale_width,
                                 rect.origin.y * scale_height,
                                 rect.size.width * scale_width,
                                 rect.size.height * scale_height);
    
    //開啟圖形上下文
    UIGraphicsBeginImageContext(clipRect.size);
    //畫圖
    [image drawAtPoint:CGPointMake(-clipRect.origin.x, -clipRect.origin.y)];

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return newImage;
}



自定義點連線截圖
1.將自定義點變換到在圖片上的點
2.計算出自定義點所在的區域rect
3.開始圖形上下文，rect.size
4.繪製path，機型剪裁
5.繪圖drawAtPoint，x: - rect.origin.x y: - rect.origin.y
6.從圖形上下文獲取圖片
7.關閉圖形上下文


+ (UIImage *)cutImage:(UIImage *)image
        imageViewSize:(CGSize)size
           clipPoints:(NSArray *)points {
    //圖片大小和實際顯示大小的比例
    CGFloat scale_width = image.size.width/size.width;
    CGFloat scale_height = image.size.height/size.height;
    
    //處理剪裁的點
    NSArray *newPoints = [UIImage points:points scalex:scale_width scaleY:scale_height];
    
    //確定上下左右邊緣的點
    //x升序陣列
    NSArray *point_x = [newPoints sortedArrayUsingComparator:^NSComparisonResult(NSValue *obj1, NSValue *obj2) {
        CGPoint point1 = [obj1 CGPointValue];
        CGPoint point2 = [obj2 CGPointValue];
        return point1.x > point2.x;
    }];
    //y升序陣列
    NSArray *point_y = [newPoints sortedArrayUsingComparator:^NSComparisonResult(NSValue *obj1, NSValue *obj2) {
        CGPoint point1 = [obj1 CGPointValue];
        CGPoint point2 = [obj2 CGPointValue];
        return point1.y > point2.y;
    }];
    
    //確定剪下的區域
    CGRect clipRect = CGRectMake([point_x.firstObject CGPointValue].x,
                                 [point_y.firstObject CGPointValue].y,
                                 [point_x.lastObject CGPointValue].x - [point_x.firstObject CGPointValue].x,
                                 [point_y.lastObject CGPointValue].y - [point_y.firstObject CGPointValue].y);
    //開啟圖形上下文
    UIGraphicsBeginImageContext(clipRect.size);
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    for (NSInteger i = 0; i < newPoints.count; i ++) {
        CGPoint point = [newPoints[i] CGPointValue];
        if (i == 0) {
            [path moveToPoint:point];
        } else {
            [path addLineToPoint:point];
        }
    }
    [path closePath];
    [path addClip];
    
    //畫圖
    [image drawAtPoint:CGPointMake(-clipRect.origin.x, -clipRect.origin.y)];
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    return newImage;
}


作者：莫須有戀
連結：https://www.jianshu.com/p/3baddf100b67
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。