iOS Xcode Slicing图片拉伸的图文详解

Xcode Slicing图片拉伸的图文详解

如图是一个横纵向都加了slicing的图片

Xnip2018-09-13_10-59-32.jpg

这里主要讲下Slicing里三条线条的意义和作用

首先,先分解出水平拉伸效果的来看,这里选择的拉伸效果为Tiles也就是瓷砖式复制图像元素填充模式。


Xnip2018-09-13_11-04-03.jpg

其中三条线的作用如下

Xnip2018-09-13_11-11-36.jpg

也就是当图片拉伸时,用区域A的图片元素去不断复制填充区域B的空间,区域B是被白遮罩层盖的,这区域的图片部分是不可见的,是用于区域A填充的空间。

线1和线2的区间为区域A
线2和线3之间的白遮罩区间为区域B

竖向拉伸效果的判断同理

验证如下图:

Xnip2018-09-13_11-20-16.jpg
Xnip2018-09-13_11-29-08.jpg
Xnip2018-09-13_11-30-09.jpg

demo:https://github.com/vxiaofengs/SlicingDemo/tree/master

推荐阅读更多精彩内容