效果如下图所示

图片.png

一、简介

日常开发中，可能需要使用 圆角图片 作为按钮的背景图，不需要设置按钮的圆角半径。但是当按钮的尺寸发生改变时，边角也会被拉伸，如上图
为了解决上述问题，可使用 UIImage 的 resizableImageWithCapInsets 和 stretchableImageWithLeftCapWidth 两种方法

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode NS_AVAILABLE_IOS(6_0); // the interior is resized according to the resizingMode

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight __TVOS_PROHIBITED;

二、 resizableImageWithCapInsets

此方法是定义指定区域被拉伸，从 上、左、下、右 分别在图片上画一个矩形框，范围内的区域被拉伸，外部保持不变

image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(0,10,0,10) resizingMode:UIImageResizingModeStretch];

UIEdgeInsetsMake(0,10,0,10) : 表示上左下右边距 10，不会被拉升，其余部分（被边距划出来的矩形区域）会被拉伸。 这里的 边距 10一般表示圆角半径
UIImageResizingModeStretch: 通过拉伸 UIEdgeInsets 指定的的矩形区域来填充图片
UIImageResizingModeTile: 通过重复显示 UIEdgeInsets 指定的矩形区域来填充图片

三、stretchableImageWithLeftCapWidth

此方法是通过设置 左边不拉伸区域宽度和 上面不拉伸区域的高度 来达到边角不拉伸的效果

NSUInteger leftCapWidth = image.size.width*0.5;
NSUInteger topCapHeight = 0;
image = [image stretchableImageWithLeftCapWidth:leftCapWidth
                                   topCapHeight:topCapHeight];

leftCapWidth：左边不拉伸区域的宽度
topCapHeight：上面不拉伸区域的高度
扩展：
rightCapWidth = 图片宽度 - leftCapWidth - 1
bottomCapHeight = 图片高度 - topCapHeight - 1
而拉伸区域 capInset 实际上是（topCapHeight,leftCapWidth,bottomCapHeight,rightCapWidth）
所以，一般 leftCapWidth 取 图片宽度 的 一半，topCapHeight 取图片高度 的一半，来获取拉伸区域 1*1的矩阵来 复制填充（UIImageResizingModeTile），保持外围的区域不变

四、 封装方法

为了使用方便，将两个方法简单封装了一下

// 拉伸图片，可解决气泡背景图，圆角按钮背景图，修改尺寸边角被拉伸变形的问题
+ (UIImage *)chx_resizableImage:(UIImage *)image {
    NSInteger leftCatpWidth = image.size.width * 0.5;
    NSInteger topCapHeight = image.size.height * 0.5;
    return [image stretchableImageWithLeftCapWidth:leftCatpWidth topCapHeight:topCapHeight];
}

// 指定 上、左、下、右 的区域拉伸图片，范围外不拉伸
+ (UIImage *)chx_resizableImageWithCapInsets:(UIEdgeInsets)capInsets
                                       image:(UIImage *)image {
    return  [image resizableImageWithCapInsets:capInsets resizingMode:UIImageResizingModeStretch];
}