Quartz 2D 之Gradients

Quartz 为颜色渐变提供两种不透明的数据类型--------CGShadingRef 和 CGGradientRef。 一个用来创建轴向的渐变,一个用来创建径向的渐变。

沿着两个定义的短点轴向变化被称作线性梯度。垂直于轴的线上所有的色值是一样的。

径向的渐变中,轴上的每个点形成的圆周上半径相同的点的色值相同,沿着半径线性变化,各个圆的圆心沿着径向轴线性表变化。

需要注意的是:当你使用透明度实现渐变时,当你在PDF内容上绘制时,你不能捕捉到渐变,基于这个原因,当你在PDF上绘制渐变时,你需要设置透明度为1。

A Comparison of CGShading and CGGradient Objects 两种数据类型的比较

CGShadingRef 教你控制在渐变中每个点的是如何计算的。在创建CGShadingRef之前,你需要创建一个CGFunction 的对象(CGFunctionRef),这个对象给了我们很大的自由去创建平滑的渐变和其他非传统的渐变。当你创建CGShadingRef时,你可以指定它是线性的还是径向的。根据你的需求,是创建一个轴向的渐变还是径向的渐变,你需要利用渐变的计算功能,这些功能都被封装到了CGFuctionRef 这个对象,同时你也提供颜色空间,起始点或者半径。在调用的时候,你只需要提供给上下文CGShadingRef对象,调用CGContextDrawShading即可。其他的事Quartz 2D会帮你做。

CGGradient对象 是基于设计易用性和使用性的一个子集。创建CGGradientRef对象不需要创建CGFunction对象,你只需要传入一组位置和颜色。相比起CGShadingRef来说有个明显的优势就是可以使用多个位置,CGShadingRef被限制使用两个位置。当你创建CGGradient对象时,你只需要设置颜色空间,位置,和每个位置的颜色。当你使用渐变对象绘制在上下文时,你需要指定Quartz是轴向或者径向的渐变。绘制的时候,你需要指定起点和终点或者半径。相反CGShading对象,它的几何对象在创建的时候被定义,而不是在绘制的时候。

两者的区别:

Using a CGGradient Object 使用CGGradient

只是一个对渐变的抽象的定义,简单指定颜色和位置,而不是几何。

步骤:1.创建一个CGGradient对象,体用亚瑟空间,和一组两个或者更多的颜色成分,一组两个或者两个以上的位置。

          2.通过调用CGContextDrawLinearGradientorCGContextDrawRadialGradient 提供上下文和一个CGGradient对象,绘制选择,起始点。

         3.不必要的时候释放掉。

        location 是一个浮点数 在0-1之间。

代码8-1 片段介绍了怎么创建一个CGGradient对象,在声明了必要的变量之后,代码设置了位置,颜色组分数量(位置 * 4),代码里采用的是通用的RGB颜色,在iOS中必须通用RGB不可用,必须通过CGColorSpaceCreateDeviceRGB 来代替。然后把这些必须要参数传递给CGGradientCreateWithColorComponents.你可以使用CGGradientCreateWithColors 创建,如果你的应用程序中创建了一个CGColor对象的话会很便利。

在创建完CGGradient对象后,你可以使用它绘制一个轴向或者径向的渐变。8-2的代码片段展示了怎么为线性渐变设置起始点,然后进行绘制。图8-1 是展示了结果

代码8-3 使用了上面的CGGradient对象创建了径向的渐变。如图8-9,这个例子描述了使用坚实颜色填充渐变的扩展区域。

8-4图 展示了使用8-4的代码片段创建渐变的结果

图8-10 展示了代码8-5的效果

Using a CGShading Object 使用CGShading 对象实现渐变

创建一个CGShading 对象可以调用CGShadingCreateAxialorCGShadingCreateRadial。需要的提供的参数:

 1.一个颜色空间:CGColorSpace

2.起始点 Starting and ending points.

3.起始点的半径(针对于径向渐变)

4.一个CGFunction对象,可以通过CGFunctionCreate创建。

5.一个BOOL值,只是是否在起始点使用坚实颜色填充

创建一个CGShading对象最棘手的也许就是创建一个CGFunction对象。当你调用方法CGFucntionCreate是,你需要提供下列的:

     指向回调需要数据的指针。

     回调的输入值的数量。Quartz要求回调需要一个输入值。

     一组浮点数。

    回调提供的输出值的数量。

    一个浮点数组指定每个颜色成分和透明度。

    一个包含field字段的数据结构。

    比如这样:     void  myCalculateShadingValues (void *info, const CGFloat *in, CGFloat *out)

在你创建CGShading对象后,必要的话你可以设置裁剪区域。调用CGContextDrawShading使用渐变绘制上下文的裁剪区域。当你不需要CGShading对象时,你需要释放掉。

⭐️ Painting an Axial Gradient Using a CGShading Object

轴向和径向的渐变需要执行相似的步骤。这个例子展示了怎么使用CGShading绘制轴向渐变,在上下文中创建一个同心圆的剪裁区域,然后在裁剪的上下文上绘制渐变,如图效果8-11

   步骤:1. 创建一个CGFunction对象计算色值

             2.针对轴向渐变创建一个CGShading对象

             3.裁剪上下文

             4.使用渐变对象绘制轴向渐变

             5.释放对象

Listing 8-6展示了一个方法计算色值通过将数组里的常量与输入值相乘。

 在写好了计算色值的回调后,将其打包作为CGFunction对象的一部分。


   然后我们就可以创建一个CGShading对象了(轴向渐变)

裁剪上下文

最后绘制然后释放

总结下:完整的绘制轴向渐变CGShading 对象的程序是:

//6最后两个false 表示起始点不需要填充

⭐️Painting a Radial Gradient Using a CGShading Object 

  步骤和绘制轴向渐变是一样的。效果图:

  不同的是计算方式不同,创建CGFunction的方法和上面是一样的。

 总结下:绘制完整的径向渐变的程序是:

  demo地址:轴向与径向渐变 


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

推荐阅读更多精彩内容