CAShapeLayer和UIBezierPath

CAShapeLayer

CAShapeLayer 是CALayer 的子类。

• DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大
• CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存

123.png

UIBezierPath

UIBezierPath 专门是用来绘制路径的，常和CAShapeLayer一起配合使用。

1.画曲线

曲线

---

2.画椭圆或圆

椭圆或圆

---

3.画圆角矩形

圆角矩形

---

4.二次贝塞尔曲线

二次贝塞尔曲线

---

5.三次贝塞尔曲线

三次贝塞尔曲线

---

画圆弧

说明图片

类似qq聊天的气泡

eg:

- (void)createMaskLayer:(UIView *)view {
CGFloat viewWidth = CGRectGetWidth(view.frame);
CGFloat viewHeight = CGRectGetHeight(view.frame);
CGFloat rightSpace = 10.0f; //point3距X轴imageView右侧距离
CGFloat topSpace = 15.0f;  //point3距Y轴imageView顶部距离
CGFloat radiusSpace = 5.0f; //圆半径
//path点
CGPoint point1 = CGPointMake(radiusSpace, 0);
CGPoint point2 = CGPointMake(viewWidth - rightSpace - radiusSpace, 0);
//顺时针1/4圆弧
CGPoint radiusCenter1 = CGPointMake(point2.x, point2.y + radiusSpace);
// point3 4 5为箭头的位置 4为顶尖
CGPoint point3 = CGPointMake(viewWidth - rightSpace, topSpace);
CGPoint point4 = CGPointMake(viewWidth, topSpace + 5.0f);
CGPoint point5 = CGPointMake(viewWidth - rightSpace, topSpace + 10.f);
CGPoint point6 = CGPointMake(viewWidth - rightSpace, viewHeight - radiusSpace);
//顺时针1/4圆弧
CGPoint radiusCenter2 = CGPointMake(point6.x - radiusSpace, point6.y);
CGPoint point7 = CGPointMake(radiusSpace, viewHeight);
//顺时针1/4圆弧
CGPoint radiusCenter3 = CGPointMake(point7.x, point7.y - radiusSpace);
CGPoint point8 = CGPointMake(0, radiusSpace);
//顺时针1/4圆弧
CGPoint radiusCenter4 = CGPointMake(point8.x + radiusSpace, point8.y);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:point1];
[path addLineToPoint:point2];
[path addArcWithCenter:radiusCenter1 radius:radiusSpace startAngle:(270/180.0f)*M_PI endAngle:0 clockwise:YES];
[path addLineToPoint:point3];
[path addLineToPoint:point4];
[path addLineToPoint:point5];
[path addLineToPoint:point6];
[path addArcWithCenter:radiusCenter2 radius:radiusSpace startAngle:0 endAngle:(90/180.0f)*M_PI clockwise:YES];
[path addLineToPoint:point7];
[path addArcWithCenter:radiusCenter3 radius:radiusSpace startAngle:(90/180.0f)*M_PI endAngle:M_PI clockwise:YES];
[path addLineToPoint:point8];
[path addArcWithCenter:radiusCenter4 radius:radiusSpace startAngle:M_PI endAngle:(270/180.0f)*M_PI clockwise:YES];
[path closePath];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = path.CGPath;
view.layer.mask = maskLayer;
}