iOS-绘图介绍

约定不等于承诺〃 2022-08-03 13:52 158阅读 0赞

## 绘制图像的三种方式 ##

### 一. 子类化UIView，在drawRect：方法画图 ###

执行方法时，系统会自行创建画布(CGContext)，并且讲画布推到堆栈的栈顶位置

执行完毕后，系统会执行pop出这个画布。

- (void)drawRect:(CGRect)rect{
        CGContextRef con = UIGraphicsGetCurrentContext();
        CGContextAddEllipseInRect(con, CGRectMake(0,0,100,100));
        CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);
        CGContextFillPath(con);
    }

### 二. 直接UIGraphicsBeginImageContextWithOptions绘图 ###

UIGraphicsBeginImageContextWithOptions (  
CGSize size,  
BOOL opaque,  
CGFloat scale  
);  
参数：size–画布大小  
参数：opaque–不透明  
参数：scale–放大比例，设置为0，表示和屏幕自适应。（此参数和image中的scale是一样的）

UIGraphicsBeginImageContextWithOptions(CGSizeMake(100,100), NO, 0);
        UIBezierPath* p = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0,0,100,100)];
        [[UIColor blueColor] setFill];
        [p fill];
        UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    
        UIImageView *imgView = [[UIImageView alloc]initWithImage:im];
        imgView.frame = CGRectMake(100, 100, im.size.width, im.size.height);
        [self.view addSubview:imgView];

### 三. layer.delegate代理绘制图片 ###

UIView子类的drawLayer:inContext：方法中实现绘图任务。drawLayer:inContext：方法是一个绘制图层内容的代理方法。为了能够调用drawLayer:inContext：方法，我们需要设定图层的代理对象。

> 注意点：  
> 1. drawLayer:inContext：代理方法需要写在UIView子类中，如果写在UIViewController中会出现内存过度释放问题。  
> 2. 不应该将UIView对象设置为显示层的委托对象，这是因为UIView对象已经是隐式层的代理对象，再将它设置为另一个层的委托对象就会出问题。

下面是实现代码的声明和实现文件

@interface LayerDelegate : NSObject
    
    @end
    
    @interface LayerDelegateView : UIView
    
    @end

@implementation LayerDelegate
    
    - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx{
        //1.绘制图形
        //画一个圆
        CGContextAddEllipseInRect(ctx, CGRectMake(50, 50, 100, 100));
        //设置属性（颜色）
        CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);
        //2.渲染
        CGContextFillPath(ctx);
    }
    
    @end
    
    
    @interface LayerDelegateView ()
    
    @property (strong, nonatomic) LayerDelegate *delegate;
    
    @end
    
    @implementation LayerDelegateView
    
    - (void)drawRect:(CGRect)rect {
        // Drawing code
    }
    
    - (instancetype)initWithFrame:(CGRect)frame{
        self = [super initWithFrame:frame];
        if (self) {
            CALayer *myLayer = [CALayer layer];
            self.delegate = [[LayerDelegate alloc]init];
            myLayer.delegate = self.delegate;
            myLayer.backgroundColor = [UIColor brownColor].CGColor;
            myLayer.bounds = CGRectMake(0, 0, 200, 150);
            myLayer.anchorPoint = CGPointZero;
            myLayer.position = CGPointMake(100, 100);
            myLayer.cornerRadius = 20;
            myLayer.shadowColor = [UIColor blackColor].CGColor;
            myLayer.shadowOffset = CGSizeMake(10, 20);
            myLayer.shadowOpacity = 0.6;
    
            [myLayer setNeedsDisplay]; // 调用此方法，drawLayer: inContext:方法才会被调用。
            [self.layer addSublayer:myLayer];
        }
        return self;
    }
    
    @end

## 绘图CGContext堆栈介绍 ##

CGContext被存放在系统的一个绘图上下文堆栈区中，我们编辑CGContext的时候，可以将CGContext push到栈顶，然后在编辑完成时，将GContext pop出栈顶。下面的代码简单介绍了其使用。

UIImage *img1;
        UIImage *img2;
    
        //在绘图上下文1中绘图
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, 100), NO, 0.0);
        [@"第一个" drawInRect:CGRectMake(10, 20, 80, 20) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12]}];
        img1 = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsPushContext(UIGraphicsGetCurrentContext());
        UIGraphicsEndImageContext();//!!!: 这个等等删掉试试看
    
        //跳转到绘图上下文2中绘图
        UIGraphicsBeginImageContextWithOptions(CGSizeMake(200, 100), NO, 0.0);
        [@"第二个" drawInRect:CGRectMake(10, 20, 80, 20) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12]}];
        img2 = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    
        //pop返回到绘图上下文1中绘图
        UIGraphicsPopContext();
        [@"再第一个" drawInRect:CGRectMake(110, 20, 80, 20) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12]}];
        img1 = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsPushContext(UIGraphicsGetCurrentContext());
        UIGraphicsEndImageContext();
    
        //pop返回到绘图上下文1中绘图
        UIGraphicsPopContext();
        [@"再再第一个" drawInRect:CGRectMake(10, 40, 80, 20) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12]}];
        img1 = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    
        //绘图上下文1和绘画上下文2中的图片显示出来
        UIImageView *imgView1 = [[UIImageView alloc]initWithImage:img1];
        imgView1.frame = CGRectMake(0, 100, 200, 100);
        imgView1.backgroundColor = [UIColor yellowColor];
        [self.view addSubview:imgView1];
        UIImageView *imgView2 = [[UIImageView alloc]initWithImage:img2];
        imgView2.frame = CGRectMake(0, 300, 200, 100);
        imgView2.backgroundColor = [UIColor redColor];
        [self.view addSubview:imgView2];

### 参考文章 ###

[iOS绘图教程][iOS]  
[iOS绘图实际例子讲解][iOS 1]

[iOS]: http://www.cocoachina.com/industry/20140115/7703.html
[iOS 1]: http://blog.csdn.net/rhljiayou/article/details/9919713