ios--绘图介绍

iOS–绘图介绍

绘制图像的三种方式

一. 子类化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绘图实际例子讲解