首页
学习
活动
专区
圈层
工具
发布

iOS开发CoreGraphics核心图形框架之八——层聚合

iOS开发CoreGraphics核心图形框架之八——层聚合

    正常情况下,在使用CoreGraphics框架中的方法进行图形绘制时,每一闭合的图形都是一个独立的层,如果在绘制时添加了阴影效果,则通过阴影可以很明显的看到图形的分层情况,后绘制的图形在上层,先绘制的图形在下层,示例代码如下:

代码语言:javascript
复制
-(void)drawRect:(CGRect)rect{
    float width = rect.size.width/2;
    CGPoint center = CGPointMake(rect.size.width/2, rect.size.height/2);
    CGSize          myShadowOffset = CGSizeMake (10, -20);
    CGContextRef myContext = UIGraphicsGetCurrentContext();
    //设置阴影
    CGContextSetShadow (myContext, myShadowOffset, 10);
    //绘制三个圆形
    CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/2, center.y-width/4*3, width, width));
    CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/4, center.y-width/4, width, width));
    CGContextSetRGBFillColor (myContext, 1, 0, 0, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/4*3, center.y-width/4, width, width));
}

运行效果如下图所示:

从图中可以发现,所绘制的3个圆形并非是在同一层级上,有时开发者可能需要绘制边界复杂的图形,还以上面的例子来说,如果开发者需要绘制某个图形的边界是有3个圆形拼接而成,出现这样的层级效果是不合理的。CoreGraphics框架中也提供了进行图形聚合绘制的方法,示例如下:

代码语言:javascript
复制
-(void)drawRect:(CGRect)rect{
    float width = rect.size.width/2;
    CGPoint center = CGPointMake(rect.size.width/2, rect.size.height/2);
    CGSize          myShadowOffset = CGSizeMake (10, -20);
    CGContextRef myContext = UIGraphicsGetCurrentContext();
    CGContextSetShadow (myContext, myShadowOffset, 10);
    CGContextBeginTransparencyLayer (myContext, NULL);
    //开启图形聚合绘制
    //之后的绘制代码都将绘制到统一层上
    CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/2, center.y-width/4*3, width, width));
    CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/4, center.y-width/4, width, width));
    CGContextSetRGBFillColor (myContext, 1, 0, 0, 1);
    CGContextFillEllipseInRect(myContext, CGRectMake(center.x-width/4*3, center.y-width/4, width, width));
    //结束聚合绘制
    CGContextEndTransparencyLayer (myContext);
}

效果如下图所示:

有了聚合绘制这样的方法,进行复杂图形的绘制将更加灵活!

专注技术,热爱生活,交流技术,也做朋友。 ——珲少 QQ群:203317592

下一篇
举报
领券