图片的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 可以减少代码量,以更快完成开发任务。