iOS 图片拉伸处理

图片的Resize处理

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets 可以使用此方法生成一个新的图片，其参数 capInsets 是个结构体，可用 UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right) 定义，由 top，left，bottom，right 参数定义的区域在拉伸时会保持不变，其中 top、left、bottom、right 的单位都是 point ，以实例说明该方法的使用吧。

实例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 ，表示图片的处理方式。由于这里只是水平平铺，所以其 top 和 bottom 都是 0，left 和 right 的值都是根据需要平铺的区域来设定。同样，这也可以通过 Xcode xcassets 的 Slices 来完成。如下图所示: 

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

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

参考文章：    http://liumh.com/2015/10/21/ios-image-related-matching/