很多朋友說看了網上很多關于點九的文章，越看越糊涂，之前也有答應大家，科普一下點九圖，所以今天文章來啦！
歡迎關注作者的微信公眾號：「菜心設計鋪」
先來看看大綱：
- 什么是點九圖
- 點九圖的作用是什么
- 點九圖的原理
- 總結
一. 什么是點九圖
點九圖其實就是安卓系統中特有的一種圖片格式，為了讓大家更好的記住，我們只要知道，后綴名是「.9.png」的圖片，就是點九圖。
二. 點九圖的作用是什么
每個事物都有其存在的價值，所以先弄清楚點九圖能為我們解決什么問題，這樣后面理解起來就會容易很多。
其實點九圖的用處就是幫助我們拉伸切圖的，比如這個切圖：
如果它需要縱向拉伸，直接拉會變成下面這個樣子：
而用了點九圖就可以讓切圖局部拉伸，而不是整體拉伸，這樣就可以把容易變形的地方保護起來：
是不是拉伸的很完美！有黑線不用怕，那只是告訴安卓系統：嘿，大兄弟，這是張點九圖，特殊對待一下！
這有能讓你快速制作點九圖的小教程 → 《你知道Android里的“點九”嗎？》。
三. 點九圖的原理
點九圖最大的原則就是四個邊必須各有一條純黑的線（或一像素的點），如下圖：
如果四條線少任何一條，或者線不是純黑的（#000000），安卓系統就不認你！
其中這四條線，左上兩條線掌管可拉伸區域，右下兩條線掌管內容顯示區：
先說左上兩條線，因為兩條線原理是一樣的，所以我們單獨拿左邊這條線來舉例吧，當我們沒有左邊那條黑線時，縱向拉伸是這樣的：
圓角是不是變形了，如果左邊加一條黑線，就相當于把原來的圖形分為三個部分：
當再次縱向拉伸的時候，只有標記了黑線的部分可以被拉伸，而上下兩部分是完好無損的，想象一下，無論你拉伸到多高，是不是都不會變形了：
當然，你左邊畫一個點也可以起到相同的效果：
左邊這條線是控制縱向拉伸的，所以上面那條黑線就是控制橫向拉伸的，原理是一樣的！
接下來我們來說右下兩條線，是控制內容區域的，單獨拿右邊那條線來舉例，如果沒有右邊那條黑線，在這個切圖上輸入內容，比如文字，是沒有限制的，內容會撐滿整個背景圖：
當有了右邊那條黑線后，切圖相當于在縱向上又被分開了：
而這次是右邊有黑線哦，別忘了右邊的黑線是控制顯示區域的，所以只有帶黑線的部分才可以顯示內容。
當然，文字不會這樣被切斷一半顯示的，這里只是方便大家觀看哪里可以顯示內容！
同樣的原理，當我下面也畫一條線后，橫向上也是只有帶黑線的部分可以顯示內容（紅線是輔助示意的哈）：
這就是點九的基本原理了！
四. 總結
最后總結幾個要點：
- 點九切圖四周必須要有四條一像素純黑的線或點。
- 左上兩條線控制拉伸區，右下兩條線控制內容區。
- 輸出的圖片后綴必須是「.9.png」。
至于用插件還是自己手動切點九圖，看自己習慣吧，我一般都是自己畫，比較放心一點。
好了，今天就講這些了，我猜你應該大概明白了，如果沒明白，再看一遍吧。
歡迎關注作者的微信公眾號：「菜心設計鋪」
「還有哪些必讀的基礎知識」
================明星欄目推薦================
優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。
設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論 為下方 1 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓