首页 > ios > iOS Quartz 2D 学习总结

iOS Quartz 2D 学习总结

理论知识:

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.绘制直线:
 

CGContextSetLineWidth(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)'. */
void CGContextAddCurveToPoint(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)'. */
void CGContextAddQuadCurveToPoint(CGContextRef c, CGFloat cpx,
CGFloat cpy, CGFloat x, CGFloat y)

7.绘制虚线
通过CGContextSetLineDash()绘制:

/* Set the line dash patttern in 
the current graphics state of `c'. */
void CGContextSetLineDash(CGContextRef c, CGFloat phase,
    const CGFloat lengths[], size_t count)

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

  1. Jagrat 11月 7th, 2012 @ 15:54 | #1

    None can doubt the veraitcy of this article.

  2. lunettes de soleil 6月 6th, 2013 @ 05:15 | #2

    Nice…thanks for this.

评论提交中, 请稍候...

留言


可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks