轉載：九宮切圖介紹

轉載：http://bbs.cskin.net/thread-62-1-1.html

九宮切圖在控件美化的時候會常常的用到 好比：

 

 

最左邊的是一個按鈕的素材、、假設要把它作成一個按鈕、、可是 須要用的按鈕是多大不肯定的、總不能一個按鈕作一張圖吧？而若是直接對圖片進行拉昇什麼的 明顯能夠看到右邊的兩個看着怪彆扭、因而乎 這個時候九宮切圖出場了

所謂九宮切圖 其實就是把圖片分紅九份而後繪製到相應的區域去

 

 

如上圖 將按鈕是圖片分紅九個區域 而後只須要將四角填充到目標區域 其他的拉伸就能夠了

 

 

如上圖 假設粉色區域是 按鈕的區域 左上角是原圖

先把原圖的四個角取出來 原封不動的 繪製到目標區域的四個角去這樣 不管按鈕多大什麼的 四個角都是沒有拉伸過的 因此看不出那裏彆扭

接下來就是四邊了、、四邊是不得不拉昇的 否則就無法玩了可是 原圖的上下兩邊左右拉昇是沒有啥問題 原圖的左右兩邊上下拉伸是沒有問題的

 

 

剩下的中間區域沒啥說的了 直接拉昇過去 由於中間區域不像邊緣 有線條輪廓和圓角啥的一拉伸就變形了 因此能夠直接拉昇

 

 

而後把剛纔的所有合併起來就是

 

 

 

去掉參考線條和粉色背景就是