OC用UIBezierPath绘制一个不规则圆角

UI 给了一张这样的图

image.png

思路很简单

1. 两个视图 一个文字底部的背景视图 BGView 一个文字 nameLabel
2. nameLabel 居中与 BGView. BGView 的宽度高度根据 nameLabal 的大小 autolayout 布局. 我是在 xib 中设置的约束布局.
3. 设置 BGView maskLayer. 用 bezierPath 绘制三个圆角 分别为 左上4 右上2 右下9 左下0 的圆角弧度
4. 需要得到 BGView 的真实 frame . 需要进行 layoutifneed 手动刷新布局获取真实的 frame.

上代码

- (void)configCellWithModel:(Model *)model {
    nameLabel.text = model.name;
    [self layoutIfNeeded];  //自动布局刷新 frame
    [self layoutBgView];
}

- (void)layoutBgView {
    CGRect frame = BGView.frame;
    CGFloat width = frame.size.width;
    CGFloat height = frame.size.height;
    UIBezierPath *maskPath = [UIBezierPath bezierPath];
    maskPath.lineWidth = 1.0;
    maskPath.lineCapStyle = kCGLineCapRound;
    maskPath.lineJoinStyle = kCGLineJoinRound;
    [maskPath moveToPoint:CGPointMake(0, height)]; //左下角
    [maskPath addLineToPoint:CGPointMake(width-9, height)]; //底部直线
    [maskPath addQuadCurveToPoint:CGPointMake(width, height-9) controlPoint:CGPointMake(width, height)]; //圆弧
    [maskPath addLineToPoint:CGPointMake(width, 2)]; //右边直线
    [maskPath addQuadCurveToPoint:CGPointMake(width-2, 0) controlPoint:CGPointMake(width, 0)]; //右上角圆弧
    [maskPath addLineToPoint:CGPointMake(4, 0)]; //顶部直线
    [maskPath addQuadCurveToPoint:CGPointMake(0, 4) controlPoint:CGPointMake(0, 0)]; //左上角圆弧
    [maskPath addLineToPoint:CGPointMake(0, height)]; //左边直线
    
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = frame;
    maskLayer.path = maskPath.CGPath;
    BGView.layer.mask = maskLayer;
}

附带转载addQuadCurveToPoint方法的使用

image