iOS 聊天气泡样式、三角形 等多边形

在iOS开发中，我们经常会遇到让写一个聊天气泡或者不规则图形，常见的就是一个方框带一个三角，用来指向。

举个例子：现在我们又一个按钮，点击按钮之后弹出一个气泡框，要求弹出之后有一个三角形在弹框那里指向按钮。
我采用的是用点连线画一个，那么一个这样的视图需要几个点呢？如图1:

图1.png

答案是7个
各个点如下

图2.png

以左上角的红点为第一个点，顺时针旋转，总共7个点：

在画图之前我们需要已知下列条件:
1.视图的整体的frame；
2.三角的size以及三角顶点的point；

在控制器里面创建一个按钮和带有三角的视图,并调用绘制方法

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIButton *signBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    [signBtn setTitle:@"签名" forState:UIControlStateNormal];
    [signBtn setTitleColor:[UIColor magentaColor] forState:UIControlStateNormal];
    signBtn.frame = CGRectMake(230, 100, 50, 20);
    signBtn.layer.borderWidth = 1.0;
    signBtn.layer.borderColor = [UIColor magentaColor].CGColor;
    [self.view addSubview:signBtn];
    
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(50, 120, self.view.bounds.size.width - 100, 100)];
    view.backgroundColor = [UIColor colorWithRed:20/255.0 green:31/255.0 blue:51/255.0 alpha:0.75];
    [self.view addSubview:view];
    
    view.layer.mask = [self drawWithView:view withSignBtnFrame:signBtn.frame];
}

按照点绘制的具体方法，这是创建了一个CAShapeLayer

- (CAShapeLayer *)drawWithView:(UIView *)view withSignBtnFrame:(CGRect)signBtnFrame
{
    CGFloat viewWidth = CGRectGetWidth(view.frame);
    CGFloat viewHeight = CGRectGetHeight(view.frame);
    
    CGFloat topSpace = 5;
    
    //原点
    CGPoint point1 = CGPointMake(0, topSpace);
    //三角左边的点
    CGPoint point2 = CGPointMake(CGRectGetMinX(signBtnFrame) - 50 + (CGRectGetWidth(signBtnFrame) - 11) / 2, topSpace);
    //三角顶点
    CGPoint point3 = CGPointMake(CGRectGetMidX(signBtnFrame) - 50, 0);
    //三角右边的点
    CGPoint point4 = CGPointMake(CGRectGetMaxX(signBtnFrame) - (CGRectGetWidth(signBtnFrame) - 11) / 2 - 50, topSpace);
    CGPoint point5 = CGPointMake(viewWidth, topSpace);
    CGPoint point6 = CGPointMake(viewWidth, viewHeight);
    CGPoint point7 = CGPointMake(0, viewHeight);
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:point1];
    [path addLineToPoint:point2];
    [path addLineToPoint:point3];
    [path addLineToPoint:point4];
    [path addLineToPoint:point5];
    [path addLineToPoint:point6];
    [path addLineToPoint:point7];
    [path closePath];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    return layer;
}

另附代码传送门，可运行看效果 ：传送门