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

DenVerjus 7年前發布 | 9K 次閱讀 iOS開發移動開發

在 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;
}

cutImage

來自：http://www.jianshu.com/p/3baddf100b67

本文由用戶 DenVerjus 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1481615249410.html

iOS開發移動開發