iOS之QuartZ 2D 绘图（二）位图上下文

2019-05-27 14:56:23 阅读：230 来源： 互联网

标签：QuartZ self iOS height 2D width UIImage 上下文 size

位图上下文

需要手动开启这个上线下文UIGraphicsBeginImageContextWithOptions
在结束之后必须关闭这个文图上下文UIGraphicsEndImageContext();

1.生成头像图片（或者添加图片水印）

在这里插入图片描述


- (void)viewDidLoad {
    [super viewDidLoad];
    
    CGSize size = CGSizeMake(50, 50);
    UIColor *color = [UIColor colorWithRed:0/255.0 green:153/255.0 blue:204/255.0 alpha:1];
    NSString *text = @"李";
   
    
    //参数二：不透明度
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    // 获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 使用color演示填充上下文
    CGContextSetFillColorWithColor(context, [color CGColor]);
    // 渲染上下文
    CGContextFillRect(context, CGRectMake(0, 0, size.width, size.height));
    
    //绘制文字
    NSDictionary *textAttributes = @{NSForegroundColorAttributeName:[UIColor whiteColor],NSFontAttributeName:[UIFont systemFontOfSize:20]};
    
     CGSize textSize = [text sizeWithAttributes:textAttributes];
    
     CGRect textRect = CGRectMake((size.width - textSize.width) / 2, (size.height - textSize.height) / 2, textSize.width, textSize.height);
    
    [text drawInRect:textRect withAttributes:textAttributes];
    
    // 从上下文中获取图片
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();
    
    self.imageView.image = theImage;
    
    
}

2.图片的裁剪

在这里插入图片描述


- (void)viewDidLoad {
    [super viewDidLoad];
    
    //获取到image
    UIImage *getImage = [UIImage imageNamed:@"10.jpg"];
    
    //1.开启位图上下文
      UIGraphicsBeginImageContext(getImage.size);
    //2.设置裁剪区域
    //2.1绘制一个圆形
    
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, getImage.size.width, getImage.size.height)];

    //2.2 设置裁剪区域
    [path addClip];
    
    //3.绘制图片到上下文中
    [getImage drawAtPoint:CGPointZero];
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //关闭
    UIGraphicsEndImageContext();
    
    self.imageView.image = newImage;
    
   
    
    
}

2.1带有边框的头像裁剪

在这里插入图片描述

//j裁剪带有边框的头像
- (void)headClipImageWithBorder {

    //获取到image
    UIImage *getImage = [UIImage imageNamed:@"10.jpg"];
    
    CGFloat bore =10;
    
    CGFloat borWidth = getImage.size.width +  2 *10;
    
    CGFloat boeHeight = getImage.size.height + 2 *10;
    
    //1.开启位图上下文
    UIGraphicsBeginImageContext(CGSizeMake(borWidth, boeHeight));
    //2.设置裁剪区域
    //2.1绘制一个圆形
    
    
    UIBezierPath *boePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, borWidth, boeHeight)];
    
    [[UIColor redColor] set];
    
    [boePath fill];
    
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(bore , bore, getImage.size.width, getImage.size.height)];
    
    //2.2 设置裁剪区域
    [path addClip];
    
    //3.绘制图片到上下文中
    [getImage drawAtPoint:CGPointMake(bore, bore)];
    
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //关闭
    UIGraphicsEndImageContext();
    
    self.imageView.image = newImage;
    
}

头像裁剪的方法抽取

/**
裁剪图片带有边框
@param borderWidth 表框的宽度
@param color 表框的颜色
@param image 要裁剪的图片
@return 一个带有边框的图片
*/
/+ (UIImage *)imageWithBorder:(CGFloat )borderWidth WithColot:(UIColor *)color WithImage:(UIImage *)image;


+ (UIImage *)imageWithBorder:(CGFloat)borderWidth WithColot:(UIColor *)color WithImage:(UIImage *)image {
    
    CGSize size = CGSizeMake(image.size.width + 2 * borderWidth, image.size.height + 2 * borderWidth);
    //1.开启位图上下文
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    //2.绘制一个大圆
    UIBezierPath *borderPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    //设置颜色
    [color set];
    //填充
    [borderPath fill];
    
    //3.绘制裁剪区域
    
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderWidth, borderWidth, image.size.width, image.size.height)];
    
    [clipPath addClip];
    
    //4.绘制图片
    [image drawAtPoint:CGPointMake(borderWidth, borderWidth)];
    
    //5.获取图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //6.结束
    UIGraphicsEndImageContext();
    
    return newImage;
    
    
}

生成头像的抽取

在这里插入图片描述

- (void)viewDidLoad {
    [super viewDidLoad];
    

   UIColor *color = [UIColor colorWithRed:0/255.0 green:153/255.0 blue:204/255.0 alpha:1];
    //绘制文字
    NSDictionary *textAttributes = @{NSForegroundColorAttributeName:[UIColor whiteColor],NSFontAttributeName:[UIFont systemFontOfSize:20]};
    self.imageView.image = [UIImage getHeadImageWithColor:color WithSize:CGSizeMake(70, 70) WithText:@"上" WithTextAttributes:textAttributes WithCircular:YES];
    
}


//生成带有文字的头像
+ (UIImage *)getHeadImageWithColor:(UIColor *)color WithSize:(CGSize )size WithText:(NSString *)text WithTextAttributes:(NSDictionary *)textAttributes WithCircular:(BOOL)isCircular {
    
    CGRect rect = CGRectMake(0, 0, size.width, size.height);
    //开启位图上线文
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    //获取上下文
    CGContextRef ref = UIGraphicsGetCurrentContext();
    if (isCircular) {
        
        UIBezierPath *cirPath = [UIBezierPath bezierPathWithOvalInRect:rect];
        
        CGContextAddPath(ref, cirPath.CGPath);
        CGContextClip(ref);
    }
    
    // 使用color演示填充上下文
    CGContextSetFillColorWithColor(ref, [color CGColor]);
    // 渲染上下文
    CGContextFillRect(ref, rect);
    
    //绘制文字
    CGSize textSize = [text sizeWithAttributes:textAttributes];
    
    CGRect textRect = CGRectMake((size.width - textSize.width) / 2, (size.height - textSize.height) / 2, textSize.width, textSize.height);
    
    [text drawInRect:textRect withAttributes:textAttributes];
    

    // 从上下文中获取图片
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
    // 结束上下文
    UIGraphicsEndImageContext();
    
    return theImage;
    
}

截屏

 //开启上下文 这个上文和view的大小尺寸一样
    UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);
    
    //获取上下文
    CGContextRef Ref = UIGraphicsGetCurrentContext();
    
    //渲染到 layer  一定要把上下文渲染到layer
    [self.view.layer renderInContext:Ref];
    
    //获取图片--从上下文中获取图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //关闭上线文
    UIGraphicsEndImageContext();
    
    NSData *data = UIImageJPEGRepresentation(newImage, 1);
    
    [data writeToFile:@"地址" atomically:YES];

上面的代码是截屏是整屏幕
那么如何根据自己的需求来截屏

在这里插入图片描述

1.开启图形上下文
2.根据pan收拾获取到（开始点和当前拖动结束的点）
3.根据开始点和当前你点计算出 frame
4.绘制裁剪区域
5.获取到上下文并渲染到imageView上
6.获取到绘制的newImge

- (IBAction)handlePanAction:(UIPanGestureRecognizer *)sender {
    
    //拖动开始 用记录开始的点
    CGPoint currentP = [sender locationInView:self.imageView];
    
    if (sender.state == UIGestureRecognizerStateBegan) {
         //拖动开始 用属性记录开始的点，赋值给当前点的属性
        self.startP = currentP;
        
    }else if (sender.state == UIGestureRecognizerStateChanged){
        //拖动变化 计算view的frame
        CGFloat startX = self.startP.x;
        CGFloat startY = self.startP.y;
        CGFloat width = currentP.x - startX;
        CGFloat height = currentP.y - startY;
        self.coverView.frame = CGRectMake(startX, startY, width, height);
        
        
        
    }else if (sender.state == UIGestureRecognizerStateEnded){
        //拖动结束
        
        //开启位图上下文
        UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0);
        
       
        //绘制裁剪区域
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.coverView.frame];
        
        [path addClip];
        
        //获取上下文
        CGContextRef ref = UIGraphicsGetCurrentContext();
        
        //把上下文渲染到 imageView上
        [self.imageView.layer renderInContext:ref];
        
        //获取绘制的图片
        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
        
        //关闭上下文
        UIGraphicsEndImageContext();
        
        self.imageView.image = newImage;
        
        //拖动结束 移除
        [self.coverView removeFromSuperview];
        
        
        
    }
    
  
}


//懒加载 蒙版View
- (UIView *)coverView {
    if (!_coverView) {
        UIView *coverView = [[UIView alloc] init];
        coverView.backgroundColor = [UIColor blackColor];
        coverView.alpha = 0.7;
        [self.view addSubview:coverView];
        _coverView = coverView;
    }
    
    return _coverView;
}

标签：QuartZ,self,iOS,height,2D,width,UIImage,上下文,size
来源： https://blog.csdn.net/chase20150628/article/details/90411287

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

iOS之QuartZ 2D 绘图（二）位图上下文

位图上下文

1.生成头像图片（或者 添加图片水印）

2.图片的裁剪

2.1带有边框的头像裁剪

头像裁剪的方法抽取

生成头像的抽取

截屏

1.生成头像图片（或者添加图片水印）