iOS绘图笔记——图形上下文Drawing Context(1)

(是通过英文资料iOS Drawing扣扣巴巴一点点翻译过来的笔记。应该会有不少不对的地方,谅解~)

图形上下文(drawing context)是指在你的应用里有一个虚拟的画布(canvas)用来绘图。你可以通过“上下文”(虽然我也不清楚上下文是啥意思,就是context这个单词的翻译。。)来创建图像,文件和自定义视图,通过学习UIKit,Core Graphics和 Quartz里的基础绘图方法。

1.Framework框架

iOS的绘图程序主要源于UIKit和QuartzCore Framework。QuartzCore Framework就是我们常说的,Quartz或者Quartz 2D。Quartz这个名字比苹果内部贯彻的名字Core Graphics要出名的多,这本书(《iOS Drawing》)里提到的Quartz和Core Graphics都是同一个意思。大多以CG开头的c语言API都是取自Core Graphics,

✨通常我们说的框架有两种:一是,UIKit绘图框架;二是,Quartz;

✨✨🌟下面的章节会用特别多的例子来说明UIKit绘图和Quartz绘图的区别和联系,如何交互使用等等,请特别注意。

✨比如例子画一个圆角矩形框

✨通过UIKit

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:inset cornerRadius:12];

[bezierPath stroke];

✨通过Quartz

CGContextFillEllipseInRect(context,rect);

2.When to Draw是什么时候使用呢?

1.创建自定义视图;2.构建图像;3.创建pdf文件;4.处理核心图像

1.创建自定义视图 creating custom views

本质上,每一个UIKit的视图都是一个空的画布。你可以完全自定义的画出一个视图。你只需要在一个特殊的方法drawRect:方法里绘制出来,这个方法允许你自定义视图的样子通过UIKit和Quartz里的绘图方法。

2.构建图像 building images

在iOS中,你一可以引入一个UIKit image内容或重新使用一个UIImage单例。它允许你创建一个新的图像或者修改一个存在的图像。Drawing允许你处理自定义图像不依赖于已存在的库或图片文件。

3.创建pdf文件 creating PDFs

你可以绘制出一个UIKit pdf上下文,它既不直接出一个文件也不保存数据。它允许你处理来自app的pdf内容,分享,存储,或者展示它们。

4.处理核心图像 building with Core Graphics

你也许想一字节一字节地访问图片数据,这个需求用UIKit就不是很好完成,但是在Core Graphics的位图上下文中便可以完美地处理。比如通过Core Graphics把RGB图像转换为灰度图像。

3.上下文Contexts

每一个iOS绘图操作都从一个context开始。从概念上说,上下文和一个空白页或者一个空画布相似。它们包括了所有绘图中的状态和信息。

在iOS中,最重要的图形上下文有两个:位图(bitmap)上下文和PDF上下文。核心图形库还提供了第三个上下文的类型,它用来完成图片处理任务而非用来绘图。

1.位图上下文 Bitmap Context

位图上下文本质上是一个二维数组数据。这些数据的大小取决于每一个像素点的颜色类型代表着人什么。比如RGB图,灰度图等等。

2.PDF上下文 PDF Context

PDF很多地方和位图上下文相似,它们通过相同的命令和方法来绘制,你设置颜色或者绘制形状或文本就和绘制一个视图或者图像差不多。当然,他们也有不同的地方。

PDF以存有矢量数据。PDF上下文的内容也可能多于一页,你需要创建边界矩形来具体说明默认尺寸和每一页PDF页的位置。

3.核心图像上下文 Core Image Contexts

Core Image framework可以让你快速的处理图像。有了它,你可以处理滤镜,滤镜链,实现特点捕捉(可以找到照片中的脸和眼睛),分析图片使它自适应。

4.用UIKit创建一个上下文Establishing contexts in UIKit

1.创建一个位图上下文

✨注意所有方法等前缀,这里UI开头,都是用的是UIKit的方法。

a.基础位图上下文

Listing 1-1

b.上下文选择权许可允许以设备尺寸绘图(我也不知道我翻译的什么鬼。。。原文Context Opttions Enable Drawing at Device Scale)

Listing 1-2

鼓励使用第二种方法创建位图上下文。

2.创建PDF上下文

Listing 1-3

创建一个PDF上下文,你必须有一个文件路径或者可变data对象,还需要提供一个边界框,以及一个字典,用来具体说明元数据和安全信息。比如说,你想著名作者或者用户密码,文件权限等等。

5.用Quartz创建一个上下文。

✨这一个例子的方法均用的CG开头的方法,Core Graphics也就是Quartz的方法。

Listing 1-4

6.在上下文里绘图 Drawing into Contexts

确切的说,使用Quartz的方法在上下文里绘图。

Listing 1-5 绘制了一个线宽为4像素的灰色圆

1-5的内容是写在1-4里面的~

7.在UIKit上下文里面绘图 Drawing Within a UIKit Context

✨这个例子的关键在UIGraphicsGetCurrentContext()通过UIKit的方法得到CG的context。

Listing 1-6

UIKit简化了创建和管理上下文的方法,一句话就可以完成创建一个图像上下文或者PDF上下文,看看跟1-4,1-5比起来是不是简单多了?用UIGraphicsGetCurrentContext()方法就可以直接获取到当前的图像或者PDF上下文~

当然,在现在的UIKit里面还有更加先进的方法来完成绘制一个椭圆~~

Listing 1-7

同样是画了一个椭圆,却没有提到上下文context~是不是很神奇。(书里有一大段都是在描述没有上下文很神奇,我就不翻译了~)

发生了什么事情呢,事情是这样的。UIKit拥有一个图形上下文的堆栈,可以把绘图操作放到栈顶的上下文去完成。这些设置,比如说灰色,也都会推倒栈顶的上下文里去。

那么问题来了,怎么才能让核心绘图上下文和UIKit融为一体呢?有两个关键的方法就来了~

· 你可以手动推出一个上下文,通过UIGraphicsPushContext(context)方法。这个方法可以把上下文推到UIKit栈的顶端。

·你也可以调用UIGraphicsPopContext()。这个方法可以把堆栈顶端的上下文移除UIKit的上下文栈,激活堆栈的下一个上下文或者置空。

总结

总结来了~~

混合使用核心图像上下文(Core Graphics context)和UIKit绘图,有以下几步:

1.创建一个核心绘图上下文。

2.UIGraphicsPushContext(context)。

3.使用UIKit绘图方法和Quartz的绘图方法结合来完成绘图。

4.(取回上下文的内容,得到一个image)

5.释放上下文。

8.UIKit和Quartz的颜色

在iOS开发术语中有一个叫 toll free bridged(不用通行费就可以过桥。。。)的东西,什么意思呢,就是说很多核心库里面的数据类型也可也通过交换在UIKit里面使用。比如说,ARC里面的__bridge。但是不幸的是,这个桥梁在Quartz和UIKit的关系里却是缺席的,包括颜色。

在很多绘图的类里面,UIKit通过Objective-C把Quartz的方法和Core Graphics里面的类包装起来。比如UIColor里面包了个CGColor,UIBezierPath里面包了个CGPath,UIImage里面包了CGImage和CIImage。这些东西都不是等价的。虽然你可以很容易的访问到背后的Quartz元素,但着并不能算是一个桥。

9.画家模型 The Painter's Model

iOS用一个叫“画家模型”的东西在上下文中绘图。除非你特别说明,所有的画都会画在原有画的上面。就像一个画家物理绘图是一样的,

10.上下文状态 Context State

setFill 方法用颜色来涂满绘图边界线的内部。

setStroke 只是用来给绘图边界描一个边。

如图1-9.绿色是fill 。紫色是 stroke

Figure 1-9

通过CGContextSaveGState(context)和CGContextRestoreGState(context)可以实现保存之前的绘图状态。


Listing 1-9 太长了又比较简单懒得自己再打一遍了。


Figure 1-10

代码和效果图如上。保存了之前第一次 绘图 的状态。

状态类型~

一个上下文可以存储很多种的状态,不仅仅是fill和stroke。下面我们用一个表来看看吧~

table1-1(1)

t

table 1-1(2)


table1-1 (3)

加粗字体提醒自己回头吧这个表翻译成中文



为什么越写到后面越来越卡,特别是倒入图片之后。。写着好累啊。。。还是把 drawing context这一章分开写算了。。。

后面还有几节,分别是

Context Coordinate System 上下文中的坐标系;

Clipping 剪辑;

Transforms 调整;

setting line parameters 线的参数设置;

总结;


然后第二章是 The Language of Geometry 几何语言

Points Versus Pixels 点和像素;

View Coordinates 视图坐标;

Key Structures 关键结构;

Using CGRectDivide() 使用前面这个方法;

Rectangle Utilities  矩形工具;

Fitting and Filling 拟合和填充;

Summary总结。

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

推荐阅读更多精彩内容