Quartz2D 绘图 基本概念及其使用

介绍:

1.什么是Quartz2D?

他是一个二维的绘图引擎,同时支持iOS和Mac系统

2.Quartz2D能完成的工作(实例:QQ头像的裁剪方形变圆形 需求:读取一张方形图片,显示中心圆形)

画基本线条,绘制文字,图片,截图\裁剪,自定义UIView.读取\生成PDF

3.Quartz2D在开发中的价值

当我们的控件样式极其复杂时,可以把控件内部的结构给画出画,就是自定义控件.

4.什么是图形上下文,上下文的类型有哪些?

图形上下文是用来保存用户绘制的内容状态,并决定绘制到哪个地方的.

用户把绘制好的内容先保存到图形上下文,

然后根据选择的图形上下文的不同,绘制的内容显示到地方也不相同,即输出目标也不相同.

图形上下文的类型有:

Bitmap Graphics Context(位图上下文)

PDF Graphics Context

Window Graphics Context

Layer Graphics Context(图层上下文,自定义UIView取得上下文就是图层上下文.

UIView之所以能够显示就是因为他内部有一个图层)

Printer Graphics Context

5.如何自定义UIView,步骤是什么?

首先得要有上下文,有了上下文才能决定把绘制的东西显示到哪个地方去.

其次就是这个上下文必须得和View相关联.才能将内容绘制到View上面.

步骤:

1.要先自定定UIView

2.实现DrawRect方法

3.在DrawRect方法中取得跟View相关联的上下文.

4.绘制路径(描述路径长什么样).

5.把描述好的路径保存到上下文(即:添加路径到上下文)

6.把上下文的内容渲染到View

总结简介:Quartz2D在iOS开发中很重要的一个价值是:自定义view(自定义UI控件)-显示出更好看的界面


Quartz2D使用步骤:(tip:-(void)drawRect:(CGRect)rect程序运行会自动调用一次)

场景1:使用上下文 :搞一条线段

CGContextRefctx =UIGraphicsGetCurrentContext();

CGContextMoveToPoint(ctx,10,10);

CGContextAddLineToPoint(ctx,100,100);

CGContextStrokePath(ctx);// CGContextFillPath(ctx);

提示:一般以CGContextDraw、CGContextStroke、CGContextFill开头的函数,都是用来绘制路径的

//当系统自动调用drawRect方法时会自动创建跟view相关联的上下文

场景2:BezierPath贝赛尔曲线

1.自定义视图继承UIView

2.打开/实现DrawRect方法

3.在DrawRect方法中取得跟View相关联的上下文.

CGContextRefctx =UIGraphicsGetCurrentContext();

4.绘制路径(描述路径长什么样).

UIBezierPath*path = [UIBezierPathbezierPath];

[pathmoveToPoint:CGPointMake(20,150)];

[pathaddLineToPoint:CGPointMake(280,150)];

5.把描述好的路径保存到上下文(即:添加路径到上下文)

CGContextAddPath(ctx, path.CGPath);

6.把上下文的内容渲染到View

1:CGContextStrokePath(ctx);

2:CGContextFillPath(ctx)


贝赛尔曲线BezierPath能做什么:

1.//画线,如场景2(在DrawRect可以省略上下文,直接使用路径描边,填充)

2.//画正方形(矩形)Rect- (void)rect {

·UIBezierPath* path = [UIBezierPath·bezierPathWithRect:CGRectMake(50,50,50,50)];

[pathfill];

}

2.5.//画正方形可带圆角边rounded,cornerRadius:圆角半径

- (void)cornerRadius {

CGRectrect_1 =CGRectMake(50,50,50,80);

UIBezierPath*path = [UIBezierPathbezierPathWithRoundedRect:rect_1cornerRadius:50];

[pathstroke];

}

3.//画圆形椭圆Oval

- (void)Oval {

UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(50,50,100,100)];

//A填充fil

[pathfill];

[[UIColoryellowColor]set];

//B描边str

[pathstroke];

}

4.//画弧形arc,饼图(详细见饼图)ArcCenter

·UIBezierPath*path = [UIBezierPath·bezierPathWithArcCenter:centerradius:radiusstartAngle:startAendAngle:endAclockwise:YES];

[pathaddLineToPoint:center];

·[pathfill];

注意:(栈在程序运行时是不会释放的,对象先进后出)

1.上下文状态(也是一个栈):会在渲染的时候Draw,stroke,fill给路径赋对应的属性   //1设置颜色,2设置线宽

[[UIColorredColor]set];CGContextSetLineWidth(ctx,10);

因为不会上下文状态释放,再次渲染的时候还会添加状态给路径

2.上下文状态栈:使用上下文创建的栈(可以特意保存当前栈的状态)

保存CGContextSaveGState(ctx);恢复读取CGContextRestoreGState(ctx)


使用字符串画文字:

1. 拿到字符串

NSString*str =@"glglglglglglglglgl";

2.创建初始化可变字典

NSMutableDictionary*dict = [NSMutableDictionarydictionary];

3.在字典里设置需要给文字的属性

字体dict[NSFontAttributeName] = [UIFontsystemFontOfSize:30];

字体颜色NSForegroundColorAttributeName

描边NSStrokeColorAttributeName,NSStrokeWidthAttributeName

阴影对象NSShadow的shadowOffset偏移shadowColor颜色,shadowBlurRadius偏移

dict[NSShadowAttributeName] = shadow;//

4.画字

//drawAtPoint不会自动换行

[str drawAtPoint:CGPointMake(0, 0) withAttributes:dict];

drawInRect会自动换行

[strdrawInRect:self.boundswithAttributes:dict];


加载图片并渲染:

- (void)drawPic:(CGRect)rect{

//1加载图片,可使用下面任意一种方式渲染

UIImage*image = [UIImageimageNamed:@"minion.jpg"];

//裁剪rect范围外的像素,只渲染范围内的

UIRectClip(CGRectMake(0,0,120,150));

//2.1 drawAtPoint画的是原始图片尺寸大小,适应UIView

//    [image drawAtPoint:CGPointZero];

//2.2 drawInRect画的是rect范围图片填充

//     [image drawInRect:rect];

//2.3从rect开始平铺渲染

[imagedrawAsPatternInRect:self.bounds];

}


重绘:

场景:当渲染的对象需要位移,放大,旋转,改变.等操作的时候,需要在特定的时刻(属性改变时,属性的set方法中.自动刷新方法中)

调用[viewsetNeedsDisplay];

//重绘setNeddsDisplay系统会自动调用drawRect


矩阵操作(渲染的内容进行平移,旋转,缩放):

1.获取上下文

CGContextRefctx =UIGraphicsGetCurrentContext();

2.描述路径

UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(200,100,200,100)];

3.1//平移

CGContextTranslateCTM(ctx,100,0);

3.2//旋转

CGContextRotateCTM(ctx,M_PI_4);

3.2//缩放

CGContextScaleCTM(ctx,0.5,0.5);

4.把描述好的路径保存到上下文(即:添加路径到上下文)

CGContextAddPath(ctx, path.CGPath);

5.填充渲染上下文

CGContextFillPath(ctx);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容