图片的Resize处理

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets 可以使用此方法生成一个新的图片,其参数 capInsets 是个结构体,可用 UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)

实例1,从下图左边的原图,水平拉伸想得到右边的图片:


保持图片左边(包括下三角处)在图片的水平拉伸处理中保持原样不变,通过代码设置如下:


UIImage *img = [UIImage imageNamed:@"popup"];
img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(0, 13, 0, 55) resizingMode:UIImageResizingModeStretch];
self.resizableImgView.image = img;


其中 CapInsets 的 left 值为 13 point,right 值为 55 point,这个值的确定需要根据具体图片其保持不变的区域来确定,目前,也可以通过 Xcode xcassets 的 Slicing 功能完成,如下图所示:




其中红色框 Slices 处可以控制该图片是水平拉伸(Horizontal),垂直拉伸(Vertical)或者水平垂直方向同时(Horizontal and Vertical)拉伸, 其值 Left 26,Right 110 单位是 pixels,我们通过API 

resizableImageWithCapInsets

 设置时,需要联合红色框 Scale 处的值转换为单位为 point 的值,红色框 Center 处的值控制图片变换的方式,这里 Stretches 表示将 width 为 4 pixels 的图片区域进行拉伸,还有另一种方式 Tiles,表示将设置的区域进行平铺,这种方式稍后以实例2来说明。红色框 Slices 和 Center 处的数值可以直接改变输入框中的数值改变,也可以拖动左侧图片中的竖直虚线设置,可以自己试试。



实例2,从下图左边的原图,将图片指定区域平铺想得到右边的图片:


图片 Tiles

将图片中五角星的图样进行平铺,通过代码设置如下:


UIImage *img = [UIImage imageNamed:@"about"];
img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(0, 11.5, 0, 11) resizingMode:UIImageResizingModeTile];
self.resizableImgView.image = img;


resizingMode 的值设置成 UIImageResizingModeTile

Xcode 中使用 Slicing 功能平铺处理图片

从上述可以看出,善于 Xcode 可以减少代码量,以更快完成开发任务。