iOS成长之路

Core Graphics 之 Transparency Lay

2018-08-27  本文已影响0人  Niko_peng
Transparency Layers

透明层由两个或多个对象组成,这些对象组合在一起生成复合图形。生成的复合对象被视为单个对象。当您想要对一组对象应用效果时,例如应用于图9-1中的三个圆圈的阴影,透明层是非常有用的。


屏幕快照 2018-08-27 下午4.15.54.png

如果您对图9-1中的三个圆圈应用阴影,而不首先将它们呈现到透明层,则会得到图9-2所示的结果。


屏幕快照 2018-08-27 下午4.15.58.png
透明层的工作原理

Quartz透明层类似于许多流行的图形应用程序中可用的层。层是独立的实体。Quartz为每个上下文维护一个透明层堆栈,透明层可以嵌套。但是因为层总是堆栈的一部分,所以您不能独立地操作它们。

通过调用函数CGContextBeginTransparencyLayer(它接受图形上下文和CFDictionary对象作为参数)来标记透明层的开始。dictionary允许您提供选项来指定关于该层的其他信息,但是由于Quartz 2D API尚未使用dictionary,因此您将传递NULL。在这个调用之后,图形状态参数保持不变,除了alpha(设置为1)、阴影(关闭)、混合模式(设置为正常)和其他影响最终合成的参数。
在你开始一个透明层之后,你执行任何你想在那个层中出现的绘图。在指定的上下文中绘制操作是作为合成图绘制到完全透明的背景中。此背景被视为与上下文分离的目标缓冲区。

完成绘图后,调用函数CGContextEndTransparencyLayer。Quartz使用上下文的全局alpha值和阴影状态将结果合成到上下文中,并尊重上下文的裁剪区域。

绘制到一个透明层

绘制到一个透明层需要三个步骤:

1、CGContextBeginTransparencyLayer调用的函数。
2、在透明层中绘制要合成的项。
3、CGContextEndTransparencyLayer调用的函数。
图9-3中的三个矩形被绘制到一个透明层。Quartz将矩形渲染成单个单元。

屏幕快照 2018-08-27 下午4.18.26.png

清单9-1中的函数展示了如何使用透明层来生成图9-3中的矩形。下面是对每一行代码的详细说明。
Listing 9-1 Painting to a transparency layer

void MyDrawTransparencyLayer (CGContext myContext, // 1
                                CGFloat wd,
                                CGFloat ht)
{
    CGSize          myShadowOffset = CGSizeMake (10, -20);// 2
 
    CGContextSetShadow (myContext, myShadowOffset, 10);   // 3
    CGContextBeginTransparencyLayer (myContext, NULL);// 4
    // Your drawing code here// 5
    CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3+ 50,ht/2 ,wd/4,ht/4));
    CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3-50,ht/2-100,wd/4,ht/4));
    CGContextSetRGBFillColor (myContext, 1, 0, 0, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3,ht/2-50,wd/4,ht/4));
    CGContextEndTransparencyLayer (myContext);// 6
}

下面是代码的作用:

1、使用三个参数——图形上下文和用于构造矩形的宽度和高度。
2、设置一个包含阴影的x和y偏移值的CGSize数据结构。这个阴影在水平方向上偏移了10个单位,在垂直方向上偏移了-20个单位。
3、设置阴影,指定一个值为10作为模糊值。(值0指定没有模糊的硬边阴影。)
4、表示透明层的开始。从这一点开始,绘图出现在这一层。
5、接下来的六行代码设置填充颜色并填充如图9-3所示的三个矩形。您可以用自己的绘图代码替换这些行。
6、表示透明层的结束,表示Quartz应该将结果合成到上下文中。

上一篇 下一篇

猜你喜欢

热点阅读