如何绘制 类似于气泡带小尖尖的view

 

尖尖在矩形上边

_arrowX表示小尖尖（即三角形中垂线的x） 

@interface NoteView : UIView
- (instancetype)initWithFrame:(CGRect)frame withArrowX:(CGFloat)arrowX;
@property (nonatomic, strong) NSString *contentStr;
@end
#import "NoteView.h"

@interface NoteView ()
@property (nonatomic, assign) CGFloat arrowX;
@property (nonatomic, strong) UILabel *contentLabel;
@end

@implementation NoteView


- (instancetype)initWithFrame:(CGRect)frame withArrowX:(CGFloat)arrowX{
    if (self = [super initWithFrame:frame]) {
        self.backgroundColor = [UIColor clearColor];
        _arrowX = arrowX;
        
        UILabel *contentLabel = [[UILabel alloc] initWithFrame:CGRectMake(24, 32, self.bounds.size.width - 48, self.bounds.size.height - 32 - 24)];
        contentLabel.backgroundColor = [UIColor clearColor];
        contentLabel.textColor = [UIColor redColor];
        contentLabel.textAlignment = NSTextAlignmentLeft;
        _contentLabel = contentLabel;
        
    }
    return self;
}

- (void)setContentStr:(NSString *)contentStr {
    _contentStr = contentStr;
    self.contentStr = contentStr;
}

- (void)drawRect:(CGRect)rect {
    [self drawBorderWithArrowAndArc];
    [self addSubview:self.contentLabel];
}

- (void)drawBorderWithArrowAndArc {
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGFloat w = self.bounds.size.width;
    CGFloat h = self.bounds.size.height;
    
    CGFloat r = 5;
    CGFloat arrowH = 15;
    
    // 左右下的padding
    CGFloat padding = 10;
    
    // 小尖尖 三角形底边与高之比
    CGFloat factor = 0.7;
    if (_arrowX < factor * arrowH + r + padding) {
        _arrowX = factor * arrowH + r + padding;
    }
    
    if (_arrowX > w - padding - factor * arrowH - r) {
        _arrowX = w - padding - factor * arrowH - r;
    }
    
    CGContextBeginPath(context);
    
    // 左上角起始点
    CGContextMoveToPoint(context,padding + r, arrowH);
    
    // 尖尖
    CGContextAddLineToPoint(context,_arrowX - factor * arrowH,arrowH);
    CGContextAddLineToPoint(context,_arrowX,0);
    CGContextAddLineToPoint(context,_arrowX + factor * arrowH,arrowH);
    
    // 右上角 x需要 -r
    CGContextAddLineToPoint(context,w - padding - r,arrowH);
    // 上下文、圆心x、圆心y、半径、起始弧度、终止弧度、顺时针还是逆时针
    // 当clockwise为0表示顺时针，从圆心水平向右为0弧度，向左为M_PI弧度，向下为M_PI_2，向上为-M_PI_2
    //    CGContextAddArc(CGContextRef  _Nullable c, CGFloat x, CGFloat y, CGFloat radius, CGFloat startAngle, CGFloat endAngle, int clockwise)
    CGContextAddArc(context, w - padding - r, arrowH + r, r, -M_PI_2, 0, 0);
    
    // 右下角 y需要 -r
    CGContextAddLineToPoint(context,w - padding,h - padding - r);
    CGContextAddArc(context, w - padding - r, h - padding - r, r, 0, M_PI_2, 0);
    
    // 左下角 x需要 +r
    CGContextAddLineToPoint(context,padding + r,h - padding);
    CGContextAddArc(context, padding + r, h - padding - r, r, M_PI_2, M_PI, 0);
    
    // 左上角 y需要 +r
    CGContextAddLineToPoint(context,padding,arrowH + r);
    CGContextAddArc(context, padding + r, arrowH + r, r, M_PI, -M_PI_2, 0);
    
    
    [[UIColor whiteColor] setFill];
    [[UIColor clearColor] setStroke];
    
    //设置阴影
    //    CGContextSetShadowWithColor(CGContextRef context, CGSize offset,CGFloat blur, CGColorRef color)
    //    context表示要作画的内容
    //    offset表示阴影的位置
    //    blur表示阴影的模糊度
    //    color表示图形要填充的颜色
    
    CGColorRef shadowColor = [[UIColor blackColor] colorWithAlphaComponent:0.3].CGColor;
    
    // 阴影偏移CGSizeMake(1, 0)
    CGContextSetShadowWithColor(context, CGSizeMake(1, 0), 10, shadowColor);
    
    CGContextDrawPath(context,kCGPathFillStroke);

}