resizableImageWithCapInsets認知和對@2x圖片的理解

一、resizableImageWithCapInsets

在不少編程語言中都有resizable image這樣的概念，好比android中的NinePatch graphic ，css3中的border image，微軟的Nine-Grid Rendering，還有就是iOS中UIImage的resizable image。

能夠將resizable image分紅9部分，經過它生成大圖片的時候遵循如下規則：四個角(1,3,7,9)保持不變，上下(2,8)進行橫向平鋪或拉伸，左右（4,6）進行縱向的平鋪或拉伸，中央(5)則是雙向平鋪或拉伸。

此9宮格的模型能夠使用cap insets來進行描述，cap insets有四個參數，top,left,bottom,right,分別描述9宮格上左下右的大小。

capimage.py是一個使用python的PIL庫寫的腳本，用於將一個普通的圖片去除重複部分生成一個可伸縮的圖片（resizable image），這樣使得圖片資源的使用更加靈活和節省空間。cap image支持蘋果格式的高清圖片（命名格式爲xxx@2x.png），腳本會智能的進行檢查，上面所說起的capinsets的單位是point而非pixel，在高清的狀況下1point等於2pixel。

引用：https://github.com/kejinlu/capimage

二、@2x圖片和非retina圖片

在retina屏幕下程序會自動尋找@2x圖片，若是沒有後綴爲@2x圖片，就會自動拉伸非@2x圖片，因此儘可能將你的圖片都帶上@2x後綴，這樣就不會形成在使用resizableImageWithCapInsets時因沒法找到@2x圖片對原圖進行拉伸進而再使用resizableImageWithCapInsets進行平鋪時形成圖片變形問題。