圖片裁剪,截屏,擦除也就那回事兒!

1.圓形圖片裁剪

目標明確: 得到一張圖片 (=> 位圖上下文,手動開啟和關閉,代碼位置任意)
思路:先設置好位圖上下文的裁剪路徑為圓形,再將圖片渲染到位圖上下文,取出即可。
步驟:
①開啟位圖上下文(大小與圖片一致)
②將圓形裁剪路徑添加到位圖上下文
③將圖片畫到當前位圖上下文中去 (注意:對象進入上下文叫“畫”Draw;層與層(上下文)之間叫“渲染”:Render)
④從當前位圖上下文中取出圖片
⑤關閉當前位圖上下文

  • (void)viewDidLoad {
    [super viewDidLoad];

    //1.開啟一個位圖上下文(大小跟圖片一樣大)
    UIImage *image = [UIImage imageNamed:@"阿貍頭像"];
    UIGraphicsBeginImageContext(image.size);

    //2.設置圓形裁剪區域(超出裁剪區域以外的內容會自動裁剪掉,對之前已經畫上去的東西,不會有做用,有順序.)
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    [path addClip]; //addClip默認已經添加到當前位圖上下文

    //3.把圖片繪制到上下文當中
    [image drawAtPoint:CGPointZero];

    //4.從上下文當中生成一張圖片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    //5.關閉上下文
    UIGraphicsEndImageContext();
    self.imageView.image = newImage;
    }

2.帶有邊框的圓形圖片裁剪

目標明確: 得到一張圖片 (=>位圖上下文,手動開啟和關閉,代碼位置任意)
思路 :由于裁剪路徑對之前上下文中畫的內容無效,有順序。=> 先畫目標圖片的外切圓,再設置目標圖片的內切圓裁剪路徑,最后將目標圖片畫進位圖上下文。
步驟:
①開啟一個位圖上下文(大小 等于 圖片寬高各自 + 2*Border)
②繪制目標圖片的外切圓到當前位圖上下文(設置好邊框顏色)
③將目標圖片內切圓的裁剪路徑添加到當前位圖上下文(只作用于后面添加的內容)
④將目標圖片繪制到位圖上下文中去
⑤從當前位圖上下文中獲取帶邊框的圓形圖片
⑥關閉位圖上下文

  • (UIImage *)imageWithBorderW:(CGFloat)borderW borderColor:(UIColor *)color image:(UIImage *)image
    {
    //1.開啟一個位圖上下文(大小,圖片的寬高 + 2 * 邊框寬度)
    CGSize size = CGSizeMake(image.size.width + 2 *borderW, image.size.height + 2 *borderW);
    UIGraphicsBeginImageContext(size);

    //2.繪制目標圖片外切圓到位圖上下文
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    [color set];
    [path fill];

    //3.設置裁剪區域為目標圖片內切圓,并添加到位圖上下文
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
    [clipPath addClip];

    //4 把目標圖片繪制到上下文
    [image drawAtPoint:CGPointMake(borderW, borderW)];

    //5.從上下文當中獲取圖片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    //6.關閉上下文
    UIGraphicsEndImageContext();
    return newImage;
    }

3.截屏

目標明確: 得到一張圖片 (=> 位圖上下文,手動開啟和關閉,代碼位置任意)
思路:把當前控制器View上的Layer層內容,渲染到位圖上下文,再從位圖上下文當中獲取圖片。

步驟:
①開啟位圖上下文(大小與目標View一致)
②把控制器View的Layer層內容渲染到當前開啟的位圖上下文中去
③從位圖上下文當中獲取圖片
④關閉當前位圖上下文

  • (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    //1.創建一個位圖上下文
    UIGraphicsBeginImageContext(self.view.bounds.size);

    //2.把控制器的View的layer內容渲染到上下文當中.
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    [self.view.layer renderInContext:ctx];

    //3.從上下文當中生成一張圖片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    //4.關閉上下文
    UIGraphicsEndImageContext();

    //如何把圖片轉成二進制流?
    //NSData *data = UIImageJPEGRepresentation(newImage, 1);
    NSData *data = UIImagePNGRepresentation(newImage);
    [data writeToFile:@"/Users/xmg1/Desktop/newImage.png" atomically:YES];
    }

4.圖片任意尺寸截屏

目標明確: 得到一張圖片 (=>位圖上下文,手動開啟和關閉,代碼位置任意)
思路:圖片與用戶交互加Pan(拖拽)手勢 + 實時顯示我選中區域大小作為裁剪區域 + 將目標圖片所在Layer渲染到位圖上下文中再取出

步驟:
①設置顯示圖片的UIImageView控件與用戶交互并添加Pan手勢
②監聽Pan手勢開始以及改變的狀態,實時記錄用戶選中圖片截屏區域(懶加載一個遮蓋UIView,這里UIBezierPath畫路徑不好使)
③當手勢狀態停止的時候,開啟位圖上下文,將遮蓋區域設置為裁剪區域添并添加進位圖上下文
④將目標圖片所在的Layer渲染進位圖上下文,然后從位圖上下文取出截屏圖片(注意:取出的截屏圖片尺寸與原圖一致)
⑤關閉當前位圖上下文

  • (UIView *)coverV {
    if (_coverV == nil) {
    //創建遮蓋
    UIView *coverV = [[UIView alloc] init];
    coverV.backgroundColor = [UIColor blackColor];
    coverV.alpha = 0.7;
    [self.view addSubview:coverV];
    _coverV = coverV;
    }
    return _coverV;
    }

  • (void)viewDidLoad {
    [super viewDidLoad];
    self.imageV.userInteractionEnabled = YES;
    }

  • (IBAction)pan:(UIPanGestureRecognizer *)pan {

    if (pan.state == UIGestureRecognizerStateBegan) {
    //獲取手指的當前點
    self.startP = [pan locationInView:self.imageV];
    }else if (pan.state == UIGestureRecognizerStateChanged) {
    CGPoint curP = [pan locationInView:self.imageV];
    CGFloat Width = curP.x - self.startP.x;
    CGFloat height = curP.y - self.startP.y;
    CGRect frame = CGRectMake(self.startP.x, self.startP.y, Width, height);
    self.coverV.frame = frame;
    }else if (pan.state == UIGestureRecognizerStateEnded) {

      //開啟位圖上下文
      UIGraphicsBeginImageContextWithOptions(self.imageV.bounds.size, NO, [UIScreen mainScreen].scale);
      
      //設置遮蓋區域為裁剪區域
      UIRectClip(self.coverV.frame);
      
      //把ImageView的內容給渲染到上下文當中.
      CGContextRef ctx = UIGraphicsGetCurrentContext();
      [self.imageV.layer renderInContext:ctx];
      
      //獲取截屏圖片(截屏后尺寸未變。)
      UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
      
      //關閉上下文
      UIGraphicsEndImageContext();
      self.imageV.image  = newImage; //重寫Draw方法覆蓋原有內容,相當于將圖片繪制到imageV的圖層上下文中去。
      [self.coverV removeFromSuperview]; //性能考慮
    

    }
    }
    @end

5.圖片擦除

目標明確: 得到一擦除區域變透明的圖片 (=>位圖上下文,手動開啟和關閉,代碼位置任意)
思路:“首先明確,擦除區域總范圍是固定的”。準備兩張一樣的圖片上下放置,上面一張有遮蓋;將上層圖片所在的Layer層內容渲染到位圖上下文中,再實時按手指擦除“區域”讓位圖上下文中的上層圖片變透明,最后從位圖上下文中取回圖片畫進存放上層圖片的View中

步驟:
①設置上層圖片所在View與用戶交互并添加Pan(拖拽)手勢
(在Pan手勢方法里:不分狀態,直接就是擦除操作)
②開啟位圖上下文
③把上層圖片Layer中的內容渲染到位圖上下文中
④確定手指點擊代表的區域大小,比如“寬高各30”,并將手指實時移動的Rect作為位圖上下文中擦除區域的Rect
⑤取出位圖上下文中的圖片,并繪制到上層圖片所在View的layer中
⑥關閉位圖上下文

  • (void)viewDidLoad {
    [super viewDidLoad];
    self.imageView.userInteractionEnabled = YES;
    //添加手勢
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self.imageView addGestureRecognizer:pan];
    }

  • (void)pan:(UIPanGestureRecognizer *)pan {

    //1.開啟位圖上下文
    UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0.0);

    //2.把上層圖片的內容渲染到位圖上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    [self.imageView.layer renderInContext:ctx];

    //3.確定手指點擊代表區域大小,并將手指實時移動的Rect作為位圖上下文的擦除Rect
    CGPoint curP = [pan locationInView:self.imageView];
    CGFloat rectWH = 100;
    CGFloat x = curP.x - rectWH * 0.5;
    CGFloat y = curP.y - rectWH * 0.5;
    CGRect rect = CGRectMake(x, y, rectWH, rectWH);
    CGContextClearRect(ctx, rect); //擦除本質:變透明

    //4.將從位圖上下文獲取的圖片繪制到上層圖片所在的View中(layer中)
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    self.imageView.image = newImage;//重寫Drawrect方法

    //5.關閉位圖上下文
    UIGraphicsEndImageContext();
    }

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Quartz2D 簡介 Quartz2D是二維(平面)的繪圖引擎(經包裝的函數庫,方便開發者使用。也就是說蘋果幫我...
    iOS_Cqlee閱讀 640評論 0 2
  • Quartz2D以及drawRect的重繪機制字數1487 閱讀21 評論1 喜歡1一、什么是Quartz2D Q...
    PurpleWind閱讀 810評論 0 3
  • 218.241.181.202 wxhl60 123456 192.168.10.253 wxhl66 wxhl6...
    CYC666閱讀 1,443評論 0 6
  • 相關資源 棋盤和手勢解鎖 chess.gif gestureLock.gif GitHub粒子發射和復制圖層示例 ...
    asaBoat閱讀 461評論 0 1
  • 馬克·吐溫曾經說過:“十九世紀有兩大奇人,一是拿破倫,另一個就是海倫·凱勒。”最近,我讀了一本關于海倫的書——《假...
    D040小黎佛山閱讀 341評論 2 3