Quartz Core绘图的基本操作

转载请注明出处：http://www.cnblogs.com/idalink/articles/4140594.html

 

QuartzCore是UIView底层图像图形绘制的FrameWork。使用QuarzCore之前，要明白UIView的绘制过程，当界面的控件树构造完成之后，iOS系统需要根据Autolayout和SizeClass的规则，进行frame计算，最终确定每个view在superview上的位置。最后由CALayer会进行视图层的渲染。渲染主要UIView如下两个方法。

 

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx

- (void)drawRect:(CGRect)rect

这两个方法是被动执行的，请不要主动调用这个两个方法，如果打算更新视图请调用UIView的如下方法。

 [view setNeedsDisplay];

//或则是

[view setNeedsDisplayInRect:rect];

 

开始写一个简单地Demo，预览一下QuartzCore的使用过程，我们该绘制什么呢？点、线、面、文字、图像。

1、创建单视图工程，创建UIView的子类CustomView。在xib中脱出UIView，并且把类改为刚才创建的子类CustomView。

2、复写UIView的成员函数，实现画线，画图形，填充图形效果。

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx

{

    [super drawLayer:layer inContext:ctx];

    

    CGContextSetLineWidth(ctx, 2);                      //设置线宽

    CGColorRef color = [UIColor blueColor].CGColor;     //创建颜色

    

    CGContextSetStrokeColorWithColor(ctx, color);       //线条颜色

    //CGFloat dashArray[] = {2,6,4,2};　　　　　　　　//点划线

    //CGContextSetLineDash(ctx, 2, dashArray, 4);

    //画线

    CGContextMoveToPoint(ctx, 0, 0);

    CGContextAddLineToPoint(ctx, 100, 100);

    

    //画矩形

    CGRect rect = CGRectMake(20, 20, 100, 100);

    CGContextAddRect(ctx, rect);

    

    //画椭圆

    CGRect ellipse = CGRectMake(140, 140, 60, 30);

    CGContextAddEllipseInRect(ctx, ellipse);

    CGContextStrokePath(ctx);                          //完成画线，并输出

    CGColorRelease(color);

    //填充区域

    //填充红色矩形

    CGContextSetFillColorWithColor(ctx, [UIColor yellowColor].CGColor);

    CGContextSetLineWidth(ctx, 4);

    CGContextFillRect(ctx, CGRectMake(120, 200, 120, 60));

 }

 

运行效果：

 

3、对绘制流程的大致解释

(1)、颜色

ctx为当前绘图上下文，如果函数（比如drawRect:rect）参数中没有传递进来上下文，则需要自己构建，该函数只在绘图函数中有效。在绘图期间，上下文就是该view的显示层，我们在该层上绘制的图案最终会显示在UIView界面上，除此之外我们也可以构建一个位图上下文，把图像绘制在位图上，稍后会写个demo演示一下。

需要值得注意的是，设置线条颜色。由于Quartz2D是C语言API，不便于传入UIColor对象。这里可接收三种数据参数，CGColorSpace，float *颜色和CGColor结构体指针。如下三段代码等价。

    CGColorRef color = [UIColor blueColor].CGColor;     //创建颜色

    CGContextSetStrokeColorWithColor(ctx, color);

    等价：

　 float color[] = {0,0,1,1};

    CGContextSetStrokeColor(ctx, color);

 

(2)、路径添加

路径添加函数有如下：

CGContextAddArc
CGContextAddArcToPoint
CGContextAddCurveToPoint
CGContextAddLines
CGContextAddLineToPoint
CGContextAddPath
CGContextCopyPath
CGContextAddQuadCurveToPoint
CGContextAddRect
CGContextAddRects
CGContextBeginPath
CGContextClosePath
CGContextMoveToPoint
CGContextAddEllipseInRect

 

（3）、路径提交

CGContextStrokePath(ctx);

 提交路径，必须调用这个函数，这个函数对图案填充没有效果。

（4）、图案填充

这些功能是用于边缘或填充在当前路径。

这些函数是用来定义路径的几何形状。对于如何定义的路径的更多信息，请参阅CGPath参考。
CGContextClearRect
CGContextDrawPath
CGContextEOFillPath
CGContextFillPath
CGContextFillRect
CGContextFillRects
CGContextFillEllipseInRect
CGContextStrokePath
CGContextStrokeRect
CGContextStrokeRectWithWidth
CGContextReplacePathWithStrokedPath
CGContextStrokeEllipseInRect
CGContextStrokeLineSegments

3、绘制文字

绘制文字是个麻烦事，这里只是做个简单的测试。文字绘制需要用到的NSString的drawInRect方法。

代码如下

    

    UIGraphicsPushContext(ctx);

    NSString * string = @"Quartz 2D绘图";

    [string drawInRect:CGRectMake(20, 20, 200, 60) withAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:20]}];

    UIGraphicsPopContext();

 

效果如下：

 

特别注意，调用drawInRect方法之前，别忘了把context压入上下文栈。

3、绘制图像

导入一个张图片photo@2x.jpg，由于drawLayer回复view反复执行，为了提高性能，这里把image对象设置为UIView的成员。

 

- (void)awakeFromNib

{

    image = [UIImage imageNamed:@"photo.jpg"];

}

 

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx

{

    [super drawLayer:layer inContext:ctx];

    UIGraphicsPushContext(ctx);

    [image drawInRect:CGRectMake(30, 0, 240, 300)];

    UIGraphicsPopContext();

}

 

效果如下：

看来做个UIImageView也不难呀。^~^

posted @ 2014-12-03 17:23  Dalink  阅读(805)  评论(0)  编辑  收藏  举报