关于UIImage的capInsets以及Xcode的图片Slicing功能和Stretching功能

1. 可视化操作:Slicing

1. 关于每个方向上三条线分别代表什么意思

• 首先从水平方向上看

  • 左边线表示左边的区域不能被重复
  • 右边线表示右边的区域不能被重复
  • 中间线和左边线之间的区域被重复
  • 中间线和右边线之间的区域舍弃掉

如图

• 同理从垂直方向上看一样

• 同时从水平和垂直方向上看
  如图
  

• 红色框中的区域是重复区域
• 白色区域是被舍弃的区域
• 其他部分是不能被重复的区域

2. 关于右下角的Slicing

• slices 是 拉伸的方向,其中有四个选项
• center 是 重复部分拉伸的方式
  
  • Tiles:平铺
  • Stretches:拉伸
• center下的width和height分别代表可重复部分(就是红色框内的区域)的宽和高

2. 代码

1. 方法一(已经过时了)

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

这个函数是UIImage的一个实例函数，它的功能是创建一个内容可拉伸，而边角不拉伸的图片，需要两个参数，第一个是左边不拉伸区域的宽度，第二个参数是上面不拉伸的高度。

根据设置的宽度和高度，将接下来的一个像素进行左右扩展和上下拉伸。

• 注意：可拉伸的范围都是距离leftCapWidth后的1竖排像素，和距离topCapHeight后的1横排像素。
  参数的意义是，如果参数指定10，5。那么，图片左边10个像素，上边5个像素。不会被拉伸，x坐标为11和一个像素会被横向复制，y坐标为6的一个像素会被纵向复制。

• 注意：只是对一个像素进行复制到一定宽度。而图像后面的剩余像素也不会被拉伸。

2. 方法二(推荐)

• 1. 此方法用于图片的拉伸

// 为行文方便,之后简称该方法为拉伸方法
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode

• 1. 方法介绍和说明

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

1. 可视化操作:Stretching
   注意: 此方法对UIImageView有效,对UIButton无效
   
   这个属性的四个值：X,Y,Width,Height的取值范围是0-1；X，Y，用来确定一个点，比如我们设置为X=0.1，Y=0.1，则这个点就是图片的左上角开始，水平1/10处和竖直1/10处，设置图片的拉伸点为从这个点开始。后两个参数分别设置图片拉伸区域的宽度和高度，比如我们这样设置：Width=0.8，Height=0.8，则图片拉伸时上下左右各1/10的宽度不会被拉伸，中间部分被拉伸.一般设置为(0.5, 0.5, 0, 0)即可

参考文档:
1. SketchK七爷
2. 人生如戏