點(diǎn)九圖的制作

??????? 點(diǎn)九圖是一種特殊的 PNG 圖片，只使用在 Andriod 平臺(tái)的應(yīng)用開發(fā)里，文件擴(kuò)展名為 9.png；這種圖片能告訴開發(fā)，圖像哪一部分可以被拉伸，哪一部分不能被拉伸，運(yùn)用點(diǎn)九圖可以保證圖片在不模糊變形的前提下做到自適應(yīng)。常用于對(duì)話框和聊天氣泡背景圖片中。

一、點(diǎn)九圖的作用是什么

其實(shí)點(diǎn)九圖的用處就是幫助我們拉伸切圖的，比如這個(gè)切圖：

原圖

如果它需要縱向拉伸，直接拉會(huì)變成下面這個(gè)樣子：

直接縱向拉伸

而用了點(diǎn)九圖就可以讓切圖局部拉伸，而不是整體拉伸：

點(diǎn)九圖式拉伸

二、點(diǎn)九圖的原理

?? 注意：切圖四周必須各有一條 1px 的線或點(diǎn)，且必須為純黑色！

其中這四條線，左上兩條線掌管可拉伸區(qū)域，右下兩條線掌管內(nèi)容顯示區(qū)：

點(diǎn)九圖說(shuō)明

1、可拉伸區(qū)域

??????? 因?yàn)樽笊蟽蓷l線原理都是一樣的，拿左邊線段來(lái)舉例，加一條黑線，就相當(dāng)于把原來(lái)的圖形分為三個(gè)部分：

分割

??????? 當(dāng)再次縱向拉伸的時(shí)候，只有標(biāo)記了黑線的部分可以被拉伸，而上下兩部分是完好無(wú)損的，這樣就不會(huì)變形了（當(dāng)然左邊畫一個(gè)點(diǎn)也可以起到相同的效果）：

拉伸效果

2、內(nèi)容顯示區(qū)域

??????? 拿右邊線段來(lái)舉例，如果沒有右邊那條黑線，在這個(gè)切圖上輸入內(nèi)容，比如文字，是沒有限制的，內(nèi)容會(huì)撐滿整個(gè)背景圖：

沒有線段

??????? 當(dāng)有了右邊那條黑線后，切圖相當(dāng)于在縱向上又被分開了：

分割

??????? 右邊的黑線是控制顯示區(qū)域的，所以只有帶黑線的部分才可以顯示內(nèi)容（當(dāng)然文字是不會(huì)被切割的，這里只是為了展示效果）：

右邊拉伸效果

???????? 同樣的原理，當(dāng)我下面也畫一條線后，橫向上也是只有帶黑線的部分可以顯示內(nèi)容：

底部拉伸效果

三、點(diǎn)九圖的制作方法

1、先輸出普通的png資源，用選區(qū)工具選取盡可能多的拉升部分加以刪除

png切圖

2、將這些內(nèi)容拼接成一個(gè)完整的整體

拼接

3、擴(kuò)大畫布大小，上下左右各空出一個(gè)像素

改變畫布

4、使用鉛筆工具（顏色選擇純黑色），上下左右分別畫點(diǎn)或線就可以了

點(diǎn)九圖制作完成

5、存儲(chǔ)為 Web 所用格式，選擇“png-24”，存儲(chǔ)時(shí)手動(dòng)將后綴名改為".9.png"