iOS BezierPath绘制更多弹出操作弹出框

iOS BezierPath绘制更多弹出操作弹出框

之前写过的demo，现在做下记录，当点击+号出现弹出框时候，这个弹出框可能包括多个操作，那带箭头的外框是怎么绘制的呢？

答案是BezierPath

UIBezierPath对象是CGPathRef数据类型的封装，可以绘制一些的形状如圆形、长方形、三角形等等

下面简单举一例UIBezierPath绘制一些图

- (void)drawRect:(CGRect)rect {
    [self simpleDraw];
    [self drawARCPath];
    [self drawTrianglePath];
    [self drawSecondBezierPath];
    [self drawDashLinePath];
}

//画圆角矩形
-(void)simpleDraw{
    UIBezierPath* path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 100, 100) cornerRadius:20];
    path.lineWidth = 5;
    
    //设置填充颜色
    UIColor* fillColor = [UIColor greenColor];
    [fillColor set];
    [path fill];
    
    //设置线的颜色，需要在填充颜色之后设置
    UIColor* lineColor = [UIColor redColor];
    [lineColor set];
    [path stroke];
}

//画圆弧
-(void)drawARCPath{
    UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(220, 550) radius:100 startAngle:0 endAngle:M_PI*90/180 clockwise:NO];
    
    //连接处的样式
    path.lineCapStyle = kCGLineCapRound;
    //连接方式
    path.lineJoinStyle = kCGLineJoinRound;
    path.lineWidth = 5;
    
    UIColor* lineColor = [UIColor redColor];
    [lineColor set];
    [path stroke];
}

//画三角形
-(void)drawTrianglePath{
    UIBezierPath* path = [UIBezierPath bezierPath];
    //设置起点
    [path moveToPoint:CGPointMake(20, 300)];
    [path addLineToPoint:CGPointMake(150, 400)];
    [path addLineToPoint:CGPointMake(20, 400)];
    [path closePath];
    
    path.lineWidth = 5;
    
    UIColor* fillColor = [UIColor greenColor];
    [fillColor set];
    [path fill];
    
    UIColor* lineColor = [UIColor redColor];
    [lineColor set];
    [path stroke];
    
    
}

//画二次贝尔曲线
-(void)drawSecondBezierPath{
    UIBezierPath* path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(200, 150)];
    [path addQuadCurveToPoint:CGPointMake(200, 300) controlPoint:CGPointMake(50, 50)];
    path.lineWidth = 5;
    
    UIColor* lineColor = [UIColor redColor];
    [lineColor set];
    [path stroke];
}

/

/ 画短线
-(void)drawDashLinePath{
    [[UIColor purpleColor] set];
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(200, 400, 100, 100)];
    CGFloat lengths[2] = { 10, 5 };
    [path setLineDash:lengths count:2 phase:_phase];
    path.lineWidth = 3;
    [path stroke];
}

最后记录下之前写的demo中，BezierPath绘制类似QQ或微信更多弹出操作弹出框

#pragma mark - DrawShapeLayer
- (void)drawShapeLayer {
    
    CGFloat startPointX = self.contentStartPoint.x;
    CGFloat startPointY = self.contentStartPoint.y;
    
    CGFloat width = CGRectGetWidth(self.contentBGImageView.frame);
    CGFloat height = CGRectGetHeight(self.contentBGImageView.frame);

    self.path = [UIBezierPath bezierPath]; // 创建路径
    [self.path moveToPoint:CGPointMake(startPointX, startPointY)]; // 设置起始点
    
    [self.path addLineToPoint:CGPointMake(startPointX + 5.0, kAnchorHeight)];

    [self.path addLineToPoint:CGPointMake(width - 5.0, kAnchorHeight)];
    
    [self.path addArcWithCenter:CGPointMake(width - 5.0, kAnchorHeight + 5.0) radius:5 startAngle:KCP*3/2 endAngle:2*KCP clockwise:YES]; // 绘制一个圆弧
    
    [self.path addLineToPoint:CGPointMake(width, height - 5.0)];
    
    [self.path addArcWithCenter:CGPointMake(width - 5.0, height - 5.0) radius:5 startAngle:0 endAngle:KCP/2 clockwise:YES]; // 绘制一个圆弧
    [self.path addLineToPoint:CGPointMake(5, height)];
    [self.path addArcWithCenter:CGPointMake(5.0, height-5.0) radius:5 startAngle:KCP/2 endAngle:KCP clockwise:YES]; // 绘制一个圆弧
    
    [self.path addLineToPoint:CGPointMake(0.0, kAnchorHeight + 5.0)];
    
    [self.path addArcWithCenter:CGPointMake(5, kAnchorHeight + 5) radius:5 startAngle:KCP endAngle:KCP*3/2 clockwise:YES]; // 绘制一个圆弧
    
    [self.path addLineToPoint:CGPointMake(startPointX - 5.0, kAnchorHeight)];
    [self.path addLineToPoint:CGPointMake(startPointX, startPointY)];

    self.path.lineWidth     = 2.f;
    self.path.lineCapStyle  = kCGLineCapRound;
    self.path.lineJoinStyle = kCGLineCapRound;
    
    [self.path closePath]; // 封闭未形成闭环的路径
    
    UIGraphicsBeginImageContext(self.contentBGImageView.bounds.size);
    [self.path stroke];
    UIGraphicsEndImageContext();

    self.shapeLayer.path = self.path.CGPath;
}