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

1. 可视化操作:Slicing

关于UIImage的capInsets以及Xcode的图片Slicing功能和Stretching功能_第1张图片

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

  • 首先从水平方向上看

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

如图
关于UIImage的capInsets以及Xcode的图片Slicing功能和Stretching功能_第2张图片

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

  • 同时从水平和垂直方向上看
    如图
    关于UIImage的capInsets以及Xcode的图片Slicing功能和Stretching功能_第3张图片

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

2. 关于右下角的Slicing

关于UIImage的capInsets以及Xcode的图片Slicing功能和Stretching功能_第4张图片

  • 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

关于UIImage的capInsets以及Xcode的图片Slicing功能和Stretching功能_第5张图片

  1. 可视化操作:Stretching
    注意: 此方法对UIImageView有效,对UIButton无效
    关于UIImage的capInsets以及Xcode的图片Slicing功能和Stretching功能_第6张图片
    这个属性的四个值: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. 人生如戏

你可能感兴趣的:(Objective-C)