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：方法，我们需要设定图层的代理对象。



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

@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绘图实际例子讲解