Quartz 2D 之Patterns

图案是一个绘制操作的序列,绘制到图形上下文中的一个序列。你可以使用模式就和你挑选你喜欢的颜色一样。当你使用一个模式时,Quartz将页面分为一组模式单元,每个单元格都是模式图像的大小,并使用你提供的回调函数绘制每一个单元格。图6-1显示的图案绘制到窗口图形上下文。

The Anatomy of a Pattern 图案的解剖



   可以看到 图案被解剖为一个个小的单元格。

 当你不想使用Quartz 改变patterncell 时,你可以指定 特别的矩阵来达到这个效果。

Colored Patterns and Stencil (Uncolored) Patterns 彩色图案与无色模式

彩色图案具有与它们相关的固有颜色。改变用于创建模式单元的着色,而模式失去它的意义

您可以创建任何类型的图案着色或模具。

Tiling 平铺

平铺是渲染pattern cell的一部分的过程。当Quartz向一个设备呈现一个图案时,Quartz可能需要调整图案以适应设备空间。也就是说,在用户空间中定义的模式单元由于在用户空间单元和设备像素之间的差异而被渲染到设备时可能无法完全匹配。

How Patterns Work   如何工作

图案的操作和颜色差不多,填充颜色需要两步:CGContextSetFillColor以及调用CGContextFillRect。 填充图案也同样:CGContextSetFillPattern以及CGContextFillRect、CGContextSetFillPattern。多了一步指定pattern。

举个列子:当你使用pattern 绘制时Quartz在幕后做了什么;在你填充或者描边的时候,Quartz做了以下几步针对每个pattern cell:

   1. 保存图形状态;

   2. 将当前转换矩阵转换为模式单元的原点。

   3.连接CTM 与图案矩阵

   4.剪辑包围pattern cell 的矩形框

   5.调用绘图机制绘制模式单元格

   6.恢复图形状态。

 Painting Colored Patterns  绘制彩色图案

  当你 需要去绘制彩色图案时,你需要执行以下5步。

  1.写一个调用着色模式单元格的回调函数

  2.设置彩色图案颜色空间

  3.解剖彩色图案为单元格

  4.指定彩色图案作为填充或者描边的图案

  5.开始绘制彩色图案咯

这些步骤中有一些和绘制模板图案(无色)是相同的,两个的区别就在于着色。你可以看这些步骤是如何协同工作的:A Complete Colored Pattern Painting Function.

    ⭐️ 第一步:写一个调用着色模式单元格的回调函数

  一个单元格的样式完全取决于你,例如,列表6-1的绘制单元格的代码 在图6-2中得到了充分的展示,回想下单元格周围的分割线,这些分割线并不是单元格的一部分,它绘制的边界要大于代码所绘制的矩形框。后面你需要制定图案size。

  绘制图案调用单元格函数:

typedef void (*CGPatternDrawPatternCallback) (      //你可以自己命名函数,下表6-1就命名的是MyDrawColoredPattern. 这个回调函数有两个参数

void *info,  //info 参数,是个指针指向与模式相关的私有数据。这个参数是可以选择的,你也可以传个空NULL,你传递给回调函数的数据和当你后面创建模式提供的数据是一样的

CGContextRef context//绘制单元格的上下文

);

通过6-1列表中的代码绘制的单元格是分割的,关于代码的重要细节:

图案大小被声明,你需要保存图案大小在你写代码的时候,这里大小被声明为一个全局的。绘图功能之前,原型是由CGPatternDrawPatternCallback  回调类型定义的。

          ⭐️ 第二步:设置彩色图案颜色空间

    1°:创建你需要的颜色空间,传递NULL可以清空颜色空间

    2°:设置填充或者描边

    3°:释放颜色空间

        ⭐️ 第三步:解剖为单元格

单元格是一个CGPattern对象, 通过调用方法CGPatternCreate;

拉伸的参数值: kCGPatternTilingNoDistortion 

                          kCGPatternTilingConstantSpacingMinimalDistortion

                          kCGPatternTilingConstantSpacing

isColored  决定了是否给单元格上色,如果传递true,那就需要设定颜色空间了。

最后一个参数是指向CGPatternCallbacks数据结构的指针。这个数据结构有三个字段:
 

第一个字段 设置为0 ,第二个字段是个指向回调的指针,第三个释放你传递给回到函数的iofo 参数,也可传递NULL;

          ⭐️ 第四步:指定图案的描边或者填充模式

需要传递的参数很明显。

           ⭐️ 第五步:开始绘制单元格

完成以上几步,就可以使用pattern 进行绘制了,你可以调用CGContextStrokePath,CGContextFillPath,CGContextFillRect;


下面的代码是完整的绘制彩色图案的方法



           //1  声明一个CGPattern 对象,用于后来创建

           //2  声明一个颜色空间,用户后来创建

          //3  声明透明度为1,指定为完全不透明

          //4 指定一个窗口的宽、高 。这个例子中,图案被画在一个窗口的区域上

          //5 声明 并实现回调数据结构

          //6 创建一个颜色空间对象,并且设置为空,当你绘制彩色图案时,图案在绘图回调中会使用它自己提供的颜色,这也就是牙呢空间置空的原因。

          //7 使用刚刚创建的颜色 为上下文 上色。

          //8 释放颜色空间

          //9 传递空值,因为该图案不需要额外信息传递给回调

          //10  指定单元格的边界 CGRect

          //11 传入了一个CGAffintTransform 矩阵指定了如何从图案空间像上下文的用户空间的平移,这个例子中使用的是单位矩阵。

         //12 传递每个单元格的水平位置。 这个例子中 单元格是相邻的。

         //13 传递每个单元格的垂直大小,作为每个单元格开始之间的垂直位置。

         //14.传递常量kCGPatternTilingConstantSpacing指定Quartz如何渲染图案。

         //15 传递isColored 为True,指定图案为彩色图案

         //16 传递一个执行回调结构的指针。

         //17填充上下文 传递需要的参数

         //18 释放CGPattern对象

         //19 填充矩形框使用刚刚创建的上下文

Painting Stencil Patterns   绘制无色 模板图案

 步骤和 会绘制彩色图案是一样的。

一个完整的绘制模板图案的方法


  唯一不同的是 创建pattern的时候isColored 为false;

初学者,翻译的不好,也可参考这个Quartz 2D 之模式 

 demo地址:Quartz 2D 模式之demo 


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

推荐阅读更多精彩内容

  • 模式是重复绘制到图形上下文的绘制操作序列。 您可以使用与使用颜色相同的方式使用模式。 当使用模式绘制时,Quart...
    权宜平和阅读 604评论 0 0
  • 本文转载自:http://southpeak.github.io/2014/12/05/quartz2d-6/ 模...
    idiot_lin阅读 587评论 0 0
  • Quartz2D 编程指南(一)概览、图形上下文、路径、颜色与颜色空间 Quartz2D 编程指南(二)变换、图案...
    xuyafei86阅读 2,512评论 0 15
  • 01 听马老师讲阅读 今天早上,又来了一位小伙伴,在等待孩子的过程中,马老师和家长交流了不同年级孩子阅读的挑战书目...
    胡喜平阅读 191评论 0 0
  • 说实话,我们偶尔会翻看对方手机,但只限于微信朋友圈,我们彼此会有并不完全相同的朋友圈,好奇于对方朋友圈中并不认识的...
    TinaGao阅读 516评论 0 0