在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;
}
另附代碼傳送門，可運行看效果 ：傳送門
