图片拉伸并保护关键部分不变形
2016-06-15 本文已影响566人
amberling

同一个形状的图片,美工不会每个尺寸都会帮你切图,所以码农们需要自备拉伸技能。拉伸用途很多,其中最常见的就是聊天气泡,先讲一下图片拉伸步骤:
1,通过图片名称创建UIImage 对象
2,通过image对象,返回可拉伸的图片
3,设置背景图片
上代码:
1,通过图片名称创建UIImage 对象
UIImage *image = [UIImage imageNamed:@"聊天气泡"];
假如,直接将image赋值只给某个imageView
UIImageView *imageView = [[UIImageView alloc] init];
imageView.frame = CGRectMake( 100, 100, 250, 250);
imageView.image = image;
会导致图片被拉伸变形,而且影响清晰度

因此我们可以设置图片的保护区域不被拉伸
2,通过image对象,调用resizableImageWithCapInsets
方法,生成可拉伸的图片
//设置图片保护区域
UIEdgeInsets edgeInset = UIEdgeInsetsMake(image.size.height*0.5, image.size.width *0.5, image.size.height *0.5-1, image.size.width *0.5-1);
image = [image resizableImageWithCapInsets:edgeInset];
UIEdgeInsets 结构体:
UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right) {
UIEdgeInsets insets = {top, left, bottom, right};
return insets;
}
其中,top、left、bottom、right 的值,是可被拉伸区域距原图边界的边距

3,设置背景图片
UIImageView *imageView = [[UIImageView alloc] init];
imageView.frame = CGRectMake( 100, 100, 250, 250);
imageView.image = image;
图片效果
