quartz2D 如何绘制圆形图片, 及圆环图片

Posted 2020-06-23 ooooooo

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    NSData * data = [NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://e.hiphotos.baidu.com/lvpics/w=600/sign=eeeff27ca10f4bfb8cd09d54334d788f/267f9e2f0708283873dd41f7bd99a9014d08f105.jpg"]];
    
    UIImage * image = [UIImage imageWithData:data];
    
    //开启图片的图形上下文(设置图片的图形上下文的大小)
    UIGraphicsBeginImageContext(image.size);
    
    //获取图形上下文
    CGContextRef  text = UIGraphicsGetCurrentContext();
    
    //创建路径对象 , 绘制路径
    /*
     ArcCenter: 圆心
     radius: 半径
     startAngle: 开始角度
     endAngle : 结束角度
     clockwise: 顺时针
     */
    CGPoint center = CGPointMake(self.view.bounds.size.width*0.5, self.view.bounds.size.height*0.5);
    CGFloat radius = self.view.bounds.size.width*0.5;
    
    CGFloat startAngle = 0;
    
    CGFloat  endAngle = M_PI *2;
    
    UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    
    //将路径添加到上下文中
    CGContextAddPath(text, path.CGPath);
    
    //裁剪路径
    CGContextClip(text);
    
  // 绘制图片
    
    [image drawAtPoint:CGPointZero];
    
     //从图片的图形上下文中获取图片
    
     image = UIGraphicsGetImageFromCurrentImageContext();
    
    //关闭图片的图形上下文
    
    UIGraphicsEndImageContext();
    
    //创建视图,将视图添加到View上展示
    UIImageView * imageView = [[UIImageView alloc]initWithImage:image];
    
    [self.view addSubview:imageView];
    

   我们可以吧这段代码稍微改动一下,就可以灵活的获取到一个圆形图片:

-(UIImage *)makeCircularImage:(UIImage *)image{
    
    //开启图片的图形上下文(设置图片的图形上下文的大小)
    UIGraphicsBeginImageContext(image.size);
    
    //获取图形上下文
    CGContextRef  text = UIGraphicsGetCurrentContext();
    
    //创建路径对象 , 绘制路径
    /*
     ArcCenter: 圆心
     radius: 半径
     startAngle: 开始角度
     endAngle : 结束角度
     clockwise: 顺时针
     */
    CGPoint center = CGPointMake(self.view.bounds.size.width*0.5, self.view.bounds.size.height*0.5);
    CGFloat radius = self.view.bounds.size.width*0.5;
    
    CGFloat startAngle = 0;
    
    CGFloat  endAngle = M_PI *2;
    
    UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    
    //将路径添加到上下文中
    CGContextAddPath(text, path.CGPath);
    
    //裁剪路径
    CGContextClip(text);
    
    // 绘制图片
    
    [image drawAtPoint:CGPointZero];
    
    //从图片的图形上下文中获取图片
    
    image = UIGraphicsGetImageFromCurrentImageContext();
    
    //关闭图片的图形上下文
    
    UIGraphicsEndImageContext();
    
    return image;
    
    

   绘制带圆环的圆形图片

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    NSData * data = [NSData dataWithContentsOfURL:[NSURL URLWithString:@"http://e.hiphotos.baidu.com/lvpics/w=600/sign=eeeff27ca10f4bfb8cd09d54334d788f/267f9e2f0708283873dd41f7bd99a9014d08f105.jpg"]];
    
    UIImage * image = [UIImage imageWithData:data];
    
    
    //开启图片的图形上下文
    UIGraphicsBeginImageContext(image.size);
    
    //获取图形上下文
    CGContextRef text = UIGraphicsGetCurrentContext();
    
    //创建圆环路径
    CGPoint center = CGPointMake(self.view.bounds.size.width*0.5, self.view.bounds.size.height*0.5);
        CGFloat radius = self.view.bounds.size.width*0.5-2;
    
        CGFloat startAngle = 0;
    
        CGFloat  endAngle = M_PI *2;

    
    UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    
   //将路径添加到上下文中
    
    CGContextAddPath(text, path.CGPath);
    
    //设置线条宽度 及颜色
    
    CGContextSetLineWidth(text, 2);
    
    [[UIColor redColor]setStroke];
    
    //将路径渲染到上下文上(一定要先绘制外圈的圆环,并且渲染, 否则得不到圆环 )
    
    CGContextStrokePath(text);
    
    
    //绘制圆形图片路径
    
    UIBezierPath * path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius-2 startAngle:startAngle endAngle:endAngle clockwise:YES];
    
    //添加到图形上下文中
    
    CGContextAddPath(text, path2.CGPath);
    
    //裁剪路径
    
    CGContextClip(text);
    
    //绘制图片
    
    [image drawAtPoint:CGPointMake(2, 2)];
    
    
    //获取图片的图像上下文中的图片
    
    image = UIGraphicsGetImageFromCurrentImageContext();
    
    //关闭图片的图形上下文
    
    UIGraphicsEndImageContext();
    
//    创建视图,将视图添加到View上展示
        UIImageView * imageView = [[UIImageView alloc]initWithImage:image];
    
        [self.view addSubview:imageView];
        

    
    
}

  总结:绘制圆形图片的步骤:                             绘制带圆环的圆形图片的步骤:

{1.开启图片的图形上下文                              { 1. 开启图片的图形上下文

2. 获取当前的图形上线文                                 2.获取当前的图形上下文

3.创建路径对象, 绘制路径                                3.创建圆环的路径对象,绘制路径

4.将路径添加到上下文中                                  4.将路径添加到图形上下文中

5.裁剪上下文                                                5.设置路径的线段宽度及颜色

6.绘制图片                                                   6.渲染路径

7.从图片的图形上下文中获取图片                       7.创建圆形图片的路径对象,绘制路径

8.关闭图片的图形上下文                                  8.将路径对象添加到图形上下文中

9.将得到的图片显示在View中                           9.裁剪路径

                                                                  10.绘制图片

                                                                  11.从图片的图形上下文中获取图片

                                                                  12.关闭图片的图形上下文

                                                                  13.将得到的图片显示在View中

 

 

将截屏的图片保存到相册:

UIImageWriteToSavedPhotosAlbum(clipImg, self, @selector(image:didFinishSavingWithError:contextInfo:), @"123");

 // 将图片保存到相册的时候,会执行这个方法,这个方法是可选的,但是格式是固定的.

//  - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo;

 

//将图片报春到沙盒:

NSString *filePath = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject] stringByAppendingPathComponent:@"大象.png"];

    

    NSLog(@"%@", filePath);

    

    // 2.把图片保存进去

    // 2.1需要将图片转为二进制数据

    NSData *data = UIImagePNGRepresentation(clipImg);

    // 2.2将二进制数据写入文件

    [data writeToFile:filePath atomically:YES]