仿QQ头像透明圆图剪切(CAShapeLayer 和 UIBezierPath的使用)

最近,研究了一下仿QQ头像透明圆图剪切,参考了一下code4App上一位大神的源码。

下面,把一些具体的思路写下来以助记忆,毕竟好记性不如烂笔头。

首先,用到了CAShapeLayer 和 UIBezierPath 这两者可以实现许多不规则形状的路径。

1、创建CAShapeLayer对象,设置一些必要的属性

    CAShapeLayer *pShapeLayer = [CAShapeLayer layer];

    pShapeLayer.fillColor = [UIColor redColor].CGColor;

    [self.view.layer addSublayer:pShapeLayer];

2、创建一个UIBezierPath(贝塞尔路径)

UIBezierPath *pPath = [UIBezierPath bezierPathWithRect:CGRectMake(100, 200, 200, 200)];

2.1> 此时如果把pPath 单独给pShapeLayer 即:

     pShapeLayer.path = pPath.CGPath;

如下图所示:

仿QQ头像透明圆图剪切(CAShapeLayer 和 UIBezierPath的使用)_第1张图片

3、创建另一个UIBezierPath(贝塞尔路径)

UIBezierPath *pOtherPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

3.1> 此时如果把pOtherPath 单独给pShapeLayer 即:

pShapeLayer.path = pOtherPath.CGPath;

如下图所示:

仿QQ头像透明圆图剪切(CAShapeLayer 和 UIBezierPath的使用)_第2张图片

4、把pPath路径拼接给pOtherPath路径

[pOtherPath appendPath:pPath];

pShapeLayer. path  = pOtherPath. CGPath ;

结果如图所示:

仿QQ头像透明圆图剪切(CAShapeLayer 和 UIBezierPath的使用)_第3张图片

5、到这居然还没呈现我们需要的效果,原因在哪呢?就是这个属性惹的祸!

fillRule

系统默认的属性值为:

pShapeLayer.fillRule = kCAFillRuleNonZero;

当我们改为:

_maskLayer.fillRule = kCAFillRuleEvenOdd;

效果如图:这才是我们真正想要的效果。



源码参考地址:http://code4app.com/ios/541fc47c933bf0ac3c8b45fc



你可能感兴趣的:(ios,CAShapeLayer,UIBezierPath,圆图剪切,仿QQ头像截图)