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

2024-04-06 20:07:44

位图上下文

需要手动开启这个上线下文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;
}

码农公寓

位图上下文

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

2.图片的裁剪

2.1带有边框的头像裁剪

头像裁剪的方法抽取

生成头像的抽取

截屏

相关文章

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