resizableImage和slicing相关总结

在给一些控件设置背景图片的时候，有时因为原图尺寸的问题，直接作为背景图片的时候系统会自动 将其放缩，如果是默认的contentMode这个过程中会出现变形，尤其是图片边缘的变形会形成很难看的模糊边缘。 解决的办法就是让图片角不发生变化，只变换其他位置，如此就可以解决模糊边缘的问题。

从iOS5开始，苹果提供了resizableImageWithCapInsets:方法来替换以前的stretchable...方法，用来 设置变化区域。新的方法提供了比久方法更多的控制空间，比如其参数就是一个UIEdgeInsets类型的结构体，可以制定 上下左右四个方向而且还有配对的另外一个方法用于指定变换时的策略。

比如如下的代码（为了简化说明，下边的示例都只提供垂直方向的变换）：

UIImage *origImg = [UIImage imageNamed:@"chat_send_nor"];
UIEdgeInsets edgeInsets = UIEdgeInsetsMake(19.5, 0, 19.5, 0);
UIImage *newImg = [origImg resizableImageWithCapInsets:edgeInsets];

原始图片为： 而在Assets中，我们可以直接使用slicing的方法，比如如下图的切片：还有切片的具体数据截图：

这里需要注意的一点是在切片时数据都是像素数，但是在代码中需要根据当前缩放比例来计算点数（这里比例为2.0）。

最终两种方法的效果为（左边的为切片，右边的为代码指定）：

我们可以看到两种方法的效果完全不同。实际上，在切片图中，我们可以发现有三条线，分别是对应 top和bottom界限的两条边界线和中间的一条线，可以称其为inner线。

top和bottom之间区域的作用是作为一个“模版”，或者拉伸，或者镜像平铺。同理，left和right也是这样，也就是说除了 根据capInsets指定的角落外都是模版区域。

但是，Xcode在上边的基础上又添加了inner线，这个线可以在可变模版区域内部再指定一个区域作为模版。如上边的 切图中，top和inner之间的这个1像素高的区域被当作模版，因此出现了上边的效果，如果我们将inner往下拉至bottom处， 那么切片的效果就和代码相同了，如图：。