CoreGraphics 绘制聊天气泡（图片类型的cell）

先看下效果图：

效果图.png

在聊天时，如果消息类型是纯图片类型，对于加载图片的bubble 气泡，就不太好处理了，需要将图片充满整个气泡。所以我们需要对图片做一下处理。

首先我们自定义view里实现类似的效果： 就是裁剪好这么一个带凸起的区域，然后把图片绘制在限定区域内；

- (void)drawRect:(CGRect)rect {
    // Drawing code
    
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(context, 5);
    CGContextSaveGState(context);
    //先剪裁区域
    UIBezierPath *path =[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 200 -10, 301) cornerRadius:6];
    path.lineWidth = 5;
    [path moveToPoint:CGPointMake(200-10, 0)];
    [path addLineToPoint:CGPointMake(200-10, 13)];
    [path addLineToPoint:CGPointMake(200-10+5, 16)];
    [path addLineToPoint:CGPointMake(200-10, 19)];
    [path closePath];
    

    [path fill];
    [path addClip];
    
    //裁剪好区域后 然后把图片绘制上去
    UIImage *iamge =[UIImage imageNamed:@"cutSome"];
    [iamge drawInRect:path.bounds];

        context = UIGraphicsGetCurrentContext();
    CGContextStrokePath(context);

}

可以实现类似效果

上面的处理明显是不对的，我们可以对图片进行直接处理，然后用imageview 加载即可

#import "ViewController.h"
#import "LXView.h"
#define APP_WIDTH ([UIScreen mainScreen].bounds.size.width)
#define APP_HEIGHT ([UIScreen mainScreen].bounds.size.height)
@interface ViewController ()
@property(nonatomic,strong)UIImageView *imageview;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    UIImage *imagecon=[UIImage imageNamed:@"1"];
    
   imagecon =  [self imageWithImage:imagecon scaledToSize:CGSizeMake(200, 200 *775.0/515)];
    
    self.imageview =[[UIImageView alloc]initWithFrame:CGRectMake(50, 100, imagecon.size.width, imagecon.size.height)];
//    self.imageview.image = imagecon;
    self.imageview.image =[self makeArrow:imagecon imageSize:imagecon.size];
    [self.view addSubview:self.imageview];
    
    self.imageview.backgroundColor =[UIColor redColor];
//    LXView *view =[[LXView alloc]initWithFrame:CGRectMake(20, 100, 210,400)];
//    view.backgroundColor =[UIColor redColor];
//    [self.view addSubview:view];
}

//对图片进行压缩 
- (UIImage *)imageWithImage:(UIImage*)image
               scaledToSize:(CGSize)newSize;
{
    UIGraphicsBeginImageContext(newSize);
    [image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
//    NSString * path = [NSString stringWithFormat:@"%@/Documents/cutSome.jpg",NSHomeDirectory()];
//    NSData * imagedata = UIImageJPEGRepresentation(newImage, 1);
//
//    if( [imagedata writeToFile:path atomically:YES]){
//        NSLog(@"保存成功%@",path);
//    }

    return newImage;
    
    
}
//添加箭头，其实和第一种道理一样，也是绘制一个凸起的区域，然后把图片绘制上去达到效果，不过处理的是图形上下文；
-(UIImage *)makeArrow:(UIImage *)image  imageSize:(CGSize )imageSize

{
    
    CGFloat arrowWidth = 6;
    CGFloat marginTop = 13;
    CGFloat arrowHeight = 10;
    CGFloat imageW = imageSize.width;

    
    //开始上下文
    UIGraphicsBeginImageContext(imageSize);
    //获得上下文
    CGContextRef context =UIGraphicsGetCurrentContext();
        UIBezierPath *path =[UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, imageSize.width- arrowWidth, imageSize.height) cornerRadius:6];
    [path moveToPoint:CGPointMake(imageW - arrowWidth, 0)];
    [path addLineToPoint:CGPointMake(imageW - arrowWidth, marginTop)];
    [path addLineToPoint:CGPointMake(imageW, marginTop + 0.5 * arrowHeight)];
    [path addLineToPoint:CGPointMake(imageW - arrowWidth, marginTop + arrowHeight)];
    [path closePath];
    path.lineWidth = 3;
    CGContextAddPath(context, path.CGPath);
//    CGContextEOClip(context);
    [path addClip];
    [image drawInRect:CGRectMake(0, 0, imageSize.width, imageSize.height)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
    
}