先看下效果圖：

效果圖.png

在聊天時(shí)汉额，如果消息類型是純圖片類型印叁，對(duì)于加載圖片的bubble 氣泡被冒，就不太好處理了军掂，需要將圖片充滿整個(gè)氣泡。所以我們需要對(duì)圖片做一下處理昨悼。

首先我們自定義view里實(shí)現(xiàn)類似的效果： 就是裁剪好這么一個(gè)帶凸起的區(qū)域蝗锥，然后把圖片繪制在限定區(qū)域內(nèi)；

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

    CGContextSetLineWidth(context, 5);
    CGContextSaveGState(context);
    //先剪裁區(qū)域
    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];
    
    //裁剪好區(qū)域后 然后把圖片繪制上去
    UIImage *iamge =[UIImage imageNamed:@"cutSome"];
    [iamge drawInRect:path.bounds];

        context = UIGraphicsGetCurrentContext();
    CGContextStrokePath(context);

}

可以實(shí)現(xiàn)類似效果

上面的處理明顯是不對(duì)的率触，我們可以對(duì)圖片進(jìn)行直接處理终议，然后用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];
}

//對(duì)圖片進(jìn)行壓縮 
- (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;
    
    
}
//添加箭頭，其實(shí)和第一種道理一樣葱蝗，也是繪制一個(gè)凸起的區(qū)域穴张，然后把圖片繪制上去達(dá)到效果，不過處理的是圖形上下文两曼；
-(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;
    
}