UIBezierPath CAShapeLayer 配合使用 (QQ载图效果)

UIBezierPath CAShapeLayer 配合使用 (QQ载图效果)_第1张图片

效果:显示的图片为无掩盖, 需要在中间显示光亮的圆, 圆得四周为半透明的黑色


CAShapeLayer  UIBezierPath  配合使用

思路: 使用贝塞尔曲线绘制path, 再将path 赋给 shapeLayer

1 贝塞尔曲线 画圆 (得先理解startAngle与endAngle,刚开始我搞不清楚一段圆弧从哪算起始和终止,比如弧度为0的话,是从上下左右哪个点开始算)

2 算好其余的坐标连接成线, 最后close

3 赋值给shapelayer.path


核心代码:

```

初始化贝塞尔曲线

UIBezierPath* path = [UIBezierPathbezierPath];

//准备画圆 确定开始点与结束点

在这里涉及到角度的问题,起始角和结束角,这里的角度使使用弧度制来表示,一张图片,以方便参考

UIBezierPath CAShapeLayer 配合使用 (QQ载图效果)_第2张图片


CGFloat startAngle =0;

CGFloat endAngle = ((float)M_PI*2);

[pathaddArcWithCenter:CGPointMake(IPHONE_WIDTH/2,_showImgView.frame.origin.y+_showImgView.frame.size.height/2)radius:IPHONE_WIDTH/2startAngle:startAngleendAngle:endAngleclockwise:NO];

[pathaddLineToPoint:CGPointMake(IPHONE_WIDTH,IPHONE_HEIGHT)];

[pathaddLineToPoint:CGPointMake(0,IPHONE_HEIGHT)];

[pathaddLineToPoint:CGPointMake(0,0)];

[pathaddLineToPoint:CGPointMake(IPHONE_WIDTH,0)];

[pathclosePath];

//创建一个shapeLayer

CAShapeLayer*layer = [CAShapeLayerlayer];

layer.frame=_showImgView.bounds;//与showView的frame一致

layer.strokeColor= [UIColorclearColor].CGColor;//边缘线的颜色

UIColor* blackColor = [UIColorcolorWithRed:0.0f/255.0green:0.0f/255.0blue:0.0f/255.0alpha:0.5f];

layer.fillColor= blackColor.CGColor;//闭环填充的颜色

layer.lineCap=kCALineCapSquare;//边缘线的类型

layer.path= path.CGPath;//从贝塞尔曲线获取到形状

layer.lineWidth=4.0f;//线条宽度

layer.strokeStart=0.0f;

layer.strokeEnd=0.1f;

//将layer添加进图层

[self.view.layeraddSublayer:layer];

self.overlayView.layer.mask= maskLayer;

```

你可能感兴趣的:(UIBezierPath CAShapeLayer 配合使用 (QQ载图效果))