理论知识:
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)'. */
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个实。