Laya的sizeGrid实现原理

一、sizeGrid属性介绍

Laya的图像组件提供了一个很好用的属性sizeGrid，通过设置该属性可以将图片中的重复部分拉伸，达到小图片转成大图片的目的，可以减少图片资源占用的内存。如图1.1所示，上下两个图片使用的是同一张本地图片资源，较大的图片设置了sizeGrid属性，将小图转为了大图。

sizeGrid的具体设置方式见图1.2，分别在设置框内输入上下左右四个值确定红线位置，Laya引擎在渲染时会自动将红线包围部分向上下左右四个方向拉伸，也就是四个角不变，中间部分向外拉伸。

图1.1

图1.2

二、Image源码分析

1. 直接从Laya引擎源码入手，打开Image组件的代码，搜索sizeGrid。从代码可以看出，在设置sizeGrid时，其实是设置了Image组件的_bitmap属性的sizeGrid，继续看看_bitmap是什么东西。

图2.1

2. 检索Image 的_bitmap属性，看一下注释，显示是用于绘制图形的对象，看来是代替Image实现绘制过程的实例。这么说的话，在设置图片的skin时，应该是由_bitmap来实现具体绘制，搜索skin的setter。

图2.2

3. 由图2.3可知，在设置图片skin时，如果skin地址有效，会设置source属性。

图2.3 由图2.4可知，设置source时直接设置_bitmap的source，然后派发Loaded事件，说明设置_bitmap的source属性就完成了绘制过程。到此Image组件代码分析结束。

图2.4 流程图大概如下：

图2.5 三、AutoBitmap源码分析

1. 跳转到AutoBitmap的代码，也就是Image的_bitmap属性所属的类，检索source，如图3.1所示，设置source时调用_setChanged方法。_setChanged方法设置了一个定时器，在下一次绘制前触发changeSource方法。

图3.1

2. 查看changeSource代码，在设置了sizeGrid时调用draw9Grid方法。

图3.2

3. 跳转draw9Grid方法，可以看到保存了一条绘制九宫格图片的命令。

图3.3

4. 查看这个_saveToCmd方法，可以看到不出意外的话，会把绘制九宫格命令保存到_cmds数组中，在绘制时依次调用_cmds中的命令，如图3.5。

图3.4

图3.5 流程图如下：

图3.6

四、绘制九宫格具体操作

看看绘制九宫格图片命令在run时都做了什么：图4.1是在执行绘制九宫格命令时调用的方法，可以看到根据sizeGrid参数将图片分成九部分绘制，底层的绘制原理就不研究了。

图4.1 流程图如下：

图4.2