原创 ios绘制 圆形气泡

效果:

 

 

1 先自定义一个view

#import <UIKit/UIKit.h>

 

#define kCalloutWidth   80.0   //气泡高度

#define kCalloutHeight  95.0   //气泡宽度

#define kArrorHeight    15      //底部距离高度

 

@interface CallOutContentView : UIView

 

@end

 

 

2实现代码

#import "CallOutContentView.h"

 @implementation CallOutContentView

 

- (instancetype)initWithFrame:(CGRect)frame {

 

    if (self = [super initWithFrame:frame]) {                

        self.backgroundColor = [UIColor clearColor];        

    }

    return self;

}

#pragma mark - draw rect

 

- (void)drawRect:(CGRect)rect{ 

　　[self drawInContext:UIGraphicsGetCurrentContext()];

 

　　self.layer.shadowColor = [[UIColor clearColor] CGColor];

　　self.layer.shadowOpacity = 1.0;

　　self.layer.shadowOffset = CGSizeMake(0.0f, 0.0f);

 }

 

- (void)drawInContext:(CGContextRef)context

{ 

    CGContextSetLineWidth(context, 2.0);

    CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.000 green:0.251 blue:0.502 alpha:1.000].CGColor); //气泡填充色

    [self getDrawPath:context];

}

 

//气泡背景绘制

- (void)getDrawPath:(CGContextRef)context

{

    CGRect rrect = self.bounds;    

    CGFloat radius = (kCalloutHeight - kArrorHeight) / 2.0; 

    CGFloat midx = CGRectGetMidX(rrect);

    CGFloat maxy = CGRectGetMaxY(rrect) - kArrorHeight;//调节离底部的位置

    CGFloat midy = maxy /2.0;

   

    CGContextSaveGState(context); //保存上下文 1

    

    CGContextBeginPath(context);

    

    //底部三角

    CGContextMoveToPoint(context, midx + kArrorHeight, maxy);

    CGContextAddLineToPoint(context, midx, maxy + kArrorHeight);

    CGContextAddLineToPoint(context, midx - kArrorHeight, maxy);    

    CGContextFillPath(context); //渲染三角形

 

    CGContextRestoreGState(context); //还原上下文 1

    CGContextAddArc(context, midx, midy + 5, radius, 0, M_PI*2, 1);//画圆

    CGContextFillPath(context); //渲染圆形

    CGContextClosePath(context);

}

 

@end

3 创建实例

CallOutContentView *callOutView = [[CallOutContentView alloc]initWithFrame:CGRectMake(0, 0, kCalloutWidth, kCalloutHeight)];