先看下效果图：
效果图.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;
}
