一、sizeGrid屬性介紹

Laya的影象元件提供了一個很好用的屬性sizeGrid，通過設定該屬性可以將圖片中的重複部分拉伸，達到小圖片轉成大圖片的目的，可以減少圖片資源佔用的記憶體。如圖1.1所示，上下兩個圖片使用的是同一張本地圖片資源，較大的圖片設定了sizeGrid屬性，將小圖轉為了大圖。

sizeGrid的具體設定方式見圖1.2，分別在設定框內輸入上下左右四個值確定紅線位置，Laya引擎在渲染時會自動將紅線包圍部分向上下左右四個方向拉伸，也就是四個角不變，中間部分向外拉伸。

二、Image原始碼分析

1. 直接從Laya引擎原始碼入手，開啟Image元件的程式碼，搜尋sizeGrid。從程式碼可以看出，在設定sizeGrid時，其實是設定了Image元件的_bitmap屬性的sizeGrid，繼續看看_bitmap是什麼東西。

2. 檢索Image 的_bitmap屬性，看一下注釋，顯示是用於繪製圖形的物件，看來是代替Image實現繪製過程的例項。這麼說的話，在設定圖片的skin時，應該是由_bitmap來實現具體繪製，搜尋skin的setter。

3. 由圖2.3可知，在設定圖片skin時，如果skin地址有效，會設定source屬性。

1. 跳轉到AutoBitmap的程式碼，也就是Image的_bitmap屬性所屬的類，檢索source，如圖3.1所示，設定source時呼叫_setChanged方法。_setChanged方法設定了一個定時器，在下一次繪製前觸發changeSource方法。

2. 檢視changeSource程式碼，在設定了sizeGrid時呼叫draw9Grid方法。

3. 跳轉draw9Grid方法，可以看到儲存了一條繪製九宮格圖片的命令。

4. 檢視這個_saveToCmd方法，可以看到不出意外的話，會把繪製九宮格命令儲存到_cmds陣列中，在繪製時依次呼叫_cmds中的命令，如圖3.5。

四、繪製九宮格具體操作

看看繪製九宮格圖片命令在run時都做了什麼：圖4.1是在執行繪製九宮格命令時呼叫的方法，可以看到根據sizeGrid引數將圖片分成九部分繪製，底層的繪製原理就不研究了。