图片拉伸__resizableImageWithCapInsets:的学习

在给视图添加image的时候, 通常会遇到这样一个问题, 就是如果视图和image的大小如果不一样, 就会出现各种各样的问题. 那我们怎样才能实现图片在不变形的情况下实现展示呢?

方法:

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode

方法介绍和说明:

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
//该方法返回的是UIImage类型的对象,即返回经该方法拉伸后的图像
//传入的第一个参数capInsets是UIEdgeInsets类型的数据,即原始图像要被保护的区域
//这个参数是一个结构体,定义如下
//typedef struct { CGFloat top, left , bottom, right ; } UIEdgeInsets;
//该参数的意思是被保护的区域到原始图像外轮廓的上部,左部,底部,右部的直线距离,参考下图
//传入的第二个参数resizingMode是UIImageResizingMode类似的数据,即图像拉伸时选用的拉伸模式,
//这个参数是一个枚举类型,有以下两种方式
//UIImageResizingModeTile, 平铺 
//UIImageResizingModeStretch, 拉伸```


该图中, 标识top, left, bottom, right 的区域为保护区, 是不可编辑的区域, 那么中间的部分就是我们拉伸的区域
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1803308-6b7d433b288d447e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###具体使用:
有图片:  Image对象尺寸为60`*`128
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1803308-bca57e03b49926aa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



视图: ImageView对象尺寸为180`*`384
***
####step1: 拉伸模式
resizingMode参数为UIImageResizingModeStretch
######<1>capInsets参数为UIEdgeInsetsMake(0, 0, 0, 0)时

![33B8A539-53EC-4AB8-8665-14B8B90D120A.png](http://upload-images.jianshu.io/upload_images/1803308-e7171a883993d63e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


######<2>capInsets参数为UIEdgeInsetsMake(42, 0, 0, 0)时
当我们向拉伸方法传入该组参数时,代表我们对原始图像上部的三分之一进行保护(即红色方块区域).其拉伸效果如图
<li>原始图像中受保护的区域(即红色方块区域)在Y轴方向保持了原比例,但在X轴方向进行了拉伸
<li>原始图像中未受保护的区域,直接按比例进行了拉伸

![D29F0C4B-3B02-4609-A390-62F8C8DDF0DD.png](http://upload-images.jianshu.io/upload_images/1803308-265d5e8da8dee64e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

######<3>capInsets参数为UIEdgeInsetsMake(0,20, 0, 0)时
当我们向拉伸方法传入该组参数时,代表我们对原始图像左部的三分之一进行保护(即红色方块区域)
<li>原始图像中受保护的区域(即红色方块区域)在X轴方向保持了原比例,但在Y轴方向进行了拉伸
<li>原始图像中未受保护的区域,直接按比例进行了拉伸

![49A999A7-FF60-4C8F-AE63-430A0CD80108.png](http://upload-images.jianshu.io/upload_images/1803308-ed8efb8a56850c3d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


######<4>capInsets参数为UIEdgeInsetsMake(42, 20, 42, 20)时
当我们向拉伸方法传入该组参数时,代表我们对原始图像除数字5以外的区域进行保护(即两个红色方块围起来的区域)
<li>在X轴上,由于1被左边和上边的设置保护,3被右边和上边的设置保护,所以只能用中间的2来拉伸,同理最底下的7,8,9
<li>在Y轴上,由于1被左边和上边的设置保护,7被左边和下边的设置保护,所以只能用中间的4来拉伸,同理最底下的3,6,9
<li>由于5没有被保护,所以在整个剩余的空间中,用5进行拉伸填充

***

####step2: 平铺模式
resizingMode参数为resizingMode参数为UIImageResizingModeTile
######<1>capInsets参数为UIEdgeInsetsMake(0, 0, 0, 0)时
当我们向拉伸方法传入该组参数时,代表我们未对原始图像的任何区域进行保护.其平铺效果如图
在该种情况下,我们发现原始图像按比例填充了相框,因此我们将该情况当做拉伸模式下的默认状况
在之后的实验中,我们将该种状况当做参考对象,显示在界面的右下角

![719D6458-A3FF-4755-B651-4E75B3DDFC9E.png](http://upload-images.jianshu.io/upload_images/1803308-7abe8263489f50bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
######<2>capInsets参数为UIEdgeInsetsMake(42, 0, 0, 0)时
当我们向拉伸方法传入该组参数时,代表我们对原始图像上部的三分之一进行保护(即红色方块区域)
<li>原始图像中受保护的区域(即红色方块区域)在Y轴方向保持了原比例,但在X轴方向进行了平铺填充
<li>原始图像中未受保护的区域,直接按比例进行了平铺,但不包含被保护的区域(注意观察蓝色箭头所指的区域)
![84184D06-B05A-44A7-B3FC-8FBB50FA8C05.png](http://upload-images.jianshu.io/upload_images/1803308-2e974ce67c6d8549.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

######<3>capInsets参数为UIEdgeInsetsMake(0,20, 0, 0)时
当我们向拉伸方法传入该组参数时,代表我们对原始图像左部的三分之一进行保护(即红色方块区域)
<li>原始图像中受保护的区域(即红色方块区域)在X轴方向保持了原比例,但在Y轴方向进行了平铺填充
<li>原始图像中未受保护的区域,直接按比例进行了平铺,但不包含被保护的区域(注意观察蓝色箭头所指的区域)



![4073BA92-A6BB-45B4-A61B-AAA58B15C114.png](http://upload-images.jianshu.io/upload_images/1803308-462fca2e1ab9ddf3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

######<4>capInsets参数为UIEdgeInsetsMake(42, 20, 42, 20)时
当我们向拉伸方法传入该组参数时,代表我们对原始图像除数字5以外的区域进行保护(即两个红色方块围起来的区域)
<li>在X轴上,由于1被左边和上边的设置保护,3被右边和上边的设置保护,所以只能用中间的2来平铺,同理最底下的7,8,9
<li>在Y轴上,由于1被左边和上边的设置保护,7被左边和下边的设置保护,所以只能用中间的4来平铺,同理最底下的3,6,9
<li>由于5没有被保护,所以在整个剩余的空间中,用5进行平铺填充



![51866768-1BE9-40C5-9C39-41EC5C6FB1AD.png](http://upload-images.jianshu.io/upload_images/1803308-880a0a6afb69a874.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


原文链接:http://www.jianshu.com/p/a577023677c1

推荐阅读更多精彩内容