本文共 1940 字，大约阅读时间需要 6 分钟。

前言

忙碌的一天结束了，今天还是逼着自己把欠下的这一篇补上，毕竟我也不是很习惯拖欠东西，还是尽早完成的吧。今天主要介绍一下上次简单略过的image组件中的四种ImageType，其实大家完全可以自己去实验一下，就完全可以明白这四种的用途了，所以我写的这些也就是帮助大家提前看下展示的结果，不过我还是建议大家自己去试试这四种ImageType，这在我们未来的开发过程中是非常实用的。

四种ImageType

闲话少说，直接来看这四种ImageType。

Simple

Simple类型，顾名思义简单类型，这种类型的image在拉伸过程中，整体会发生均匀形变，并且始终有两个三角面。

我们可以看到右侧还有一个Set Native Size，这个是设置图片原始大小，这个在Sliced和Tiled里面是没有的。 对于我刚才描述的三角面，可能有些读者不是很清楚，这里我简单来说。引擎在绘制图形的时候，会先确定顶点，然后绘制三角面，进而绘制出整个平面，所以三角面的个数一定程度上决定了图形绘制的快慢。 我们可以通过FrameDebugger来看图形具体的绘制过程和信息。（Window->Analysis->Frame Debugger） 我们在这个界面可以清楚的看到vertices（顶点）是4，Indices（三角面顶点）是6。具体我们三角面的计算可以通过三角面顶点除3得到。

Sliced

Sliced和Tiled是都需要对原图片进行拉九宫处理的，这里我们先展示一下如何拉九宫。

我们通过调整L T R B 的值或者直接拖动，来对图片进行拉九宫处理，其实就是在我们图片上画出一个九宫格。 我拉了一个不平整的九宫，拉完以后点击Apply就可以了。 这个时候我们打开image，设置ImageType。 你会发现在拉伸过程中，四个角是永远不会拉伸的，保证了边缘不会发生形变。 这个时候我们看一下FrameDebugger。 顶点数变成了36，三角面顶点数变成了54，证明有18个三角面，具体18怎么来的，我们看我们拉的九宫，其实可以看做是九张矩形图，每个矩形图有两个三角面，一共18个。顶点数的计算也是如此，九张矩形图，每个矩形图4个顶点，一共36个。 相比于Simple，这种Type增加了很多顶点和三角面，势必在绘制的时候会更费，所以我们要尽量减少这种类型的出现。 那么Sliced类型的应用场景是什么呢，其实我们在开发过程中会经常发现有些大图是可以描述为外面一圈是渐变或者有阴影，中间是纯色的，这种我们就可以让美术出一张很小的图我们通过拉九宫实现他的大小，在资源方面是一个很大的节省，尤其是后续我们会说到打图集的问题，一个很大的图集加载到内存里，是会给很多低端机造成压力的，图集尽量小也成了我们在开发过程中应该注意的点。 当然，Sliced还有一个用处，它可以做一些窗体的外部阴影的图。我们取消勾选FillCenter，这样中间的图会消失，我们想象我们在拉九宫时，外圈一圈是阴影中间全是透明的，这样中间部分不就可以省下了吗。 同样这个时候的vertices和indices也会相应减少。

Tiled

Tiled比Sliced更恐怖。

话不多说直接看效果，Tiled是平铺，他会把拉伸部分重复显示，四个角位置除外，在拉伸过程中，也是重复显示的过程。FillCenter的效果和Sliced一致，就不多说了，直接看FrameDebugger。 这个数据现在已经严重超过我们最开始的数据，96个顶点，144个三角面顶点，48个三角面，这种方式比Sliced还要费。

Filled

Filed比较简单，这个完全可以自己去尝试看，它的主要应用场景是进度条，当然图中这种扇形旋转出现或消失，也会在动画中会用到。FillAmount作为一个重要参数，是控制整体的一个参数，外部也是通过修改它的值来控制进度。 来看看它的三角面和顶点数，这个是比较有意思的，它的三角面数和顶点数是跟FillAmount相关的，如这种情况，它是把原图分为四部分，和坐标系象限类似，如果没到这个象限自然不用算顶点和三角面，但是如果进入到此象限，他会直接将定点数和三角面数刷新。

总结

其实这四种Type在开发过程中应用还是蛮广泛的，Simple可以用于纯色图的拉伸，并且它是最省的，建议能用Simple的尽量用。Sliced适用于中间纯色的，或者外框类，中间不重要的等等。Tiled适用于中间重复出现的情况。Filled主要的功能就是做进度控制。

我们在后续的开发和学习中会发现，熟练掌握这四种Type，对于项目整体的提升和优化有至关重要的作用，也希望大家可以多多去了解，自己去动手操作来真正明白四种Type的应用场景。

转载地址：https://blog.csdn.net/qq_31820549/article/details/103998007 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！