转自:https://blog.csdn.net/zhongad007/article/details/78404232
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. 方法二(推荐)
此方法用于图片的拉伸
// 为行文方便,之后简称该方法为拉伸方法
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode
方法介绍和说明
/**
* 该方法返回的是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. 人生如戏