Quartz 2D 学习总结

最新推荐文章于 2017-07-16 23:46:10 发布

董德富

最新推荐文章于 2017-07-16 23:46:10 发布

阅读量695

点赞数

分类专栏： Quartz2D 文章标签： Quartz 2D Quartz 图形

Quartz2D 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了iOS中视图的绘制原理与周期，包括视图坐标系统、图形绘制环境及Quartz颜色使用等内容，并提供了绘制直线、图片、圆形、矩形、圆弧、不规则形状及贝兹曲线的具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

理论知识：

1.视图绘画周期:
　　DrawRect方法，在任何时候，当视图的一部分需要重画时会调用。
　　触发调用的四种情况:
　　　　1>对遮挡您的视图的其它视图进行移动或删除操作。
　　　　2>将视图的hidden属性声明设置为NO，使其从隐藏状态变为可见。
　　　　3>将视图滚出屏幕，然后再重新回到屏幕上。
　　　　4>显式调用视图的setNeedsDisplay或者setNeedsDisplayInRect:方法。

2.坐标
　　视图坐标系统是以左上角为原点，向右、下延伸。Quartz2D中则是以左下角为原点,向右、上延伸。

3.图形绘制环境
　　图形绘制环境是对绘制环境(设备)的一个描述、封装，类型是(CGContextRef)。
　　图形绘制环境可以是pdf文件、位图、window、layer等。
　　CGContextRef context = UIGraphicsGetCurrentContext();
　　注：有的帖子上把Context翻译成图形上下文，个人觉得应该为图形绘制环境。

4.Quartz颜色的使用
　　4.1首先要创建颜色空间:
　　　　CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();//创建GRB颜色空间
　　　　使用完毕后要释放颜色空间：
　　　　CGColorSpaceRelease(colorspace);
　　　　附:CGColorSpaceCreateDeviceGray() and CGColorSpaceCreateDeviceCMYK() 分别用来创建灰度、工业色彩空间
　　4.2创建元素
　　　　CGFloat components[] = {0.0, 0.0, 1.0, 0.5};//创建了RGBA的蓝色元素
　　4.3使用颜色空间、元素创建颜色数据结构
　　　　CGColorRef color = CGColorCreate(colorspace, components);
　　　　使用完毕同样要释放CGColorRelease(color);
　　　　还有一种方式创建颜色:使用UIColor类，需要转换一下：[UIColor redColor].CGColor;可见这种方式比较省事。

代码：

1.绘制直线：

CGContextSetLineWith(context,2.0);//线条粗细
CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor);//线条颜色
CGContextMoveToPoint(context,100.0f,100.0f);//线条开始位置（100，100）
CGContextAddLineToPoint(context,200.0f,200.0f);//线条结束位置（200,200）
CGContextStrokePath(context);//路径绘制

2.绘制图片：

UIImage *img=[UIImage named:@"xx.png"];
CGPoint imgPt=CGPointMake(100.0f,100.0f);
[img drawAtPoint:imgPt];//[img drawInRect:CGRectMake(100,100,100,100)];

3.绘制圆形和矩形：

CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(contextRef,1.0f,1.0f,1.0f,1);//上下文，R，G，B，aphla值
CGContextSetLineWith(context,2.0);//线条粗细
CGFloat components[]=(1.0f,0.0f,0.0f,1.0f);    
CGContextSetFillColor(contextRef ,components);
CGContextAddRect(contextRef, CGRectMake(50.0f, 50.0f, 100.0f, 100.0f));//绘画矩形    　
 
CGContextStrokePath(contextRef);    
CGContextFillEllipseInRect(contextRef, CGRectMake(50.0f, 50.0f, 100.0f, 100.0f));//填充矩形中椭圆形
CGContextFillRect(contextRef, CGRectMake(150.0f, 150.0f, 100.0f, 100.0f));//绘画圆形外的矩形

4.绘制圆弧：

CGContextRef contextRef = UIGraphicsGetCurrentContext();     
CGContextSetRGBStrokeColor(contextRef, 1.0f, 1.0f, 1.0f, 1);     
CGContextSetLineWidth(contextRef, 2.0f);
CGContextAddArc(contextRef, 100.0f, 300.0f, 50.0f, 0.0f * ( M_PI/180 ), 90.0f * ( M_PI/180 ), 1); 
//上下文圆心位置(100,300) 半径50 起始角度0，结束角度90度  （1是顺时针0是逆时）　　　　　　　　　　　　　　　　　　　
CGContextStrokePath(contextRef)；
CGContextAddArc(contextRef,100.0f);

5.绘制不规则形状

CGContextRef contextRef = UIGraphicsGetCurrentContext();  
CGContextSetRGBStrokeColor(contextRef, 1.0f, 1.0f, 1.0f, 1);    
CGContextSetLineWidth(contextRef, 2.0f);                        
CGFloat    components[] = { 1.0f, 0.0f, 0.0f, 1.0f};     
CGContextSetFillColor(contextRef, components);     
CGContextMoveToPoint(contextRef, 150.0f, 150.0f);     
CGContextAddLineToPoint(contextRef, 200.0f, 170.0f);     
CGContextAddLineToPoint(contextRef, 180.0f, 300.0f);     
CGContextAddLineToPoint(contextRef, 80.0f, 300.0f);     
CGContextClosePath(contextRef);//关闭路径    
CGContextFillPath（contextRef);//填充       
CGContextStrokePath(contextRef);//不填充

6.绘制贝兹曲线
通过移动一个起始点，然后通过两个控制点,还有一个中止点，调用CGContextAddCurveToPoint() 函数绘制。

/* Append a cubic Bezier curve from the current point to `(x,y)', 
with control points `(cp1x, cp1y)' and `(cp2x, cp2y)'. */
voidCGContextAddCurveToPoint(CGContextRef c,CGFloat cp1x,
CGFloat cp1y, CGFloat cp2x, CGFloat cp2y, CGFloat x, CGFloat y)

二次贝兹曲线是通过调用CGContextAddQuadCurveToPoint()来绘制。参数为1个控制点，一个中止点。

/* Append a quadratic curve from the current 
point to `(x, y)', with controlpoint `(cpx, cpy)'. */
voidCGContextAddQuadCurveToPoint(CGContextRef c, CGFloat cpx,
CGFloat cpy, CGFloat x, CGFloat y)

7.绘制虚线

通过CGContextSetLineDash()绘制：

/* Set the line dash patttern in the current graphics state of `c'. */
voidCGContextSetLineDash(CGContextRef c, CGFloat phase,
    constCGFloat lengths[], size_tcount)

　　参数:context:要描绘的上下文
　　　　 phase:一个float类型的点数据，表示在第一个虚线绘制的时候跳过多少个点
　　　　lengths:一个数组，指名了虚线如何虚实，比如，{5,6,4}代表，画5个实，6个虚，4个实。
　　　　 count:数组长度