原文出處： martin_wjl(@martin_wjl) 對於圖片拉伸是移動開發中很常見的需求，在前一陣子做項目中需要做一個類似於QQ聊天氣泡，這個氣泡會根據文字的多少而變化，當時有了三種方案： 重寫drawRect方法，使用貝賽爾曲線畫一個氣泡 用一個大圖作為背景，管它怎麼拉伸，肯定不會變形 使
原文出處： martin_wjl(@martin_wjl)
對於圖片拉伸是移動開發中很常見的需求，在前一陣子做項目中需要做一個類似於QQ聊天氣泡，這個氣泡會根據文字的多少而變化，當時有了三種方案：
- 重寫
drawRect方法，使用貝賽爾曲線畫一個氣泡 - 用一個大圖作為背景，管它怎麼拉伸，肯定不會變形
- 使用圖片，同時使用系統提供的
API對圖片進行局部拉伸
來分析一下這三種做法利弊：
- 第一種：勞民傷財，
drawRect的使用帶來離屏渲染，如果滑動聊天界面將使記憶體急劇增加,同時我也不會使用貝賽爾曲線，嗚嗚！ - 第二種：大圖的話，顯然所占空間會比較大，這樣導致最後的安裝包較大，尺寸不合適的圖片載入也會對性能有所影響
- 第三種：顯然這是一種划算的做法，對於怎麼進行局部拉伸也是這篇博客的重點
代碼實現圖片縮放
至於 iOS 5 之類的方法，這裡就不再談了。在 iOS 6 的時候，系統為我們提供了這樣一個方法
| 1 | public func resizableImageWithCapInsets(capInsets: UIEdgeInsets, resizingMode: UIImageResizingMode) -> UIImage |
對於拉伸的方式，有以下兩種：
IUIImageResizingModeStretch：拉伸模式，通過拉伸UIEdgeInsets指定的矩形區域是我們要保護的區域，也就是不被拉伸的區域UIImageResizingModeTile：平鋪模式，通過重覆顯示UIEdgeInsets指定的矩形區域是要保護的區域，也就是不被重覆顯示的區域
拉伸模式
來做四個測試，假如我們的原始圖像尺寸為60*128當我們設置capInsets為以下四種值的時候有什麼樣子的效果：
- 1:
capInsets參數為UIEdgeInsetsMake(0, 0, 0, 0) - 2:
capInsets參數為UIEdgeInsetsMake(42, 0, 0, 0) - 3:
capInsets參數為UIEdgeInsetsMake(0, 20, 0, 0) - 4:
capInsets參數為UIEdgeInsetsMake(42, 20, 42, 20)
在一個180*384的視窗進行測試圖像，對於實踐的結果，可以在這個地址中看到。
四種測試結果是：
- 1: 原始圖像拉伸，比例放大
- 2: 我們對圖片上面的區域進行了保護，其他區域進行了拉伸，保護區域在Y軸保持了原比例，但是X軸方向進行了拉伸
- 3: 我們對圖片的左側區域進行了保護，其他區域進行了拉伸，保護區域在X軸保持了原比例，但是在Y軸方向進行了拉伸
- 4: 我們對除了中心區域的位置進行了保護，中心區域進行了拉伸，四個角進行了雙層保護，其餘被保護區域在X、Y軸的拉伸與第2、3種情況下相同，效果圖如下：
效果圖4
平鋪模式
與上面的場景相同，只不過不再拉伸，改為平鋪的方式，來嘗試以下四種情況：
- 1:
capInsets參數為UIEdgeInsetsMake(0, 0, 0, 0) - 2:
capInsets參數為UIEdgeInsetsMake(42, 0, 0, 0) - 3:
capInsets參數為UIEdgeInsetsMake(0, 20, 0, 0) - 4:
capInsets參數為UIEdgeInsetsMake(42, 20, 42, 20)
在一個180*384的視窗進行測試圖像，對於實踐的結果，可以在這個地址中看到。
結論就是：
- 1: 按比例平鋪
- 2: 我們對圖片上面的區域進行了保護，其他區域按比例平鋪，保護區域在Y軸保持了原比例，但是X軸方向進行了平鋪填充
- 3: 我們對圖片的左側區域進行了保護，其他區域按比例平鋪，保護區域在X軸保持了原比例，但是在Y軸方向進行了平鋪填充
- 4: 我們對除了中心區域的位置進行了保護，中心區域按比例平鋪，四個角進行了雙層保護，其餘被保護區域在X、Y軸的平鋪與第2、3種情況下相同，效果圖如下：
效果5
註： 以上的代碼測試來自SketchK七爺
Image Slicing 可視化縮放
何為Image Slicing呢？，其實就相當於一個可視化的resizableImageWithCapInsets，可以用於指定在圖片縮放時用來填充的像素。我們可以在Xcode的Assets.xcassets目錄中選擇要slicing的圖片，點擊圖片界面右下方的Show Slicing按鈕，在想要設定切片的圖片上點擊Start Slicing，將出現左中右（或者上中下）三條可以拖動的指示線，通過拖動它們來設定實際的縮放範圍。
圖
我們剛纔說，他就是可視化的resizableImageWithCapInsets，那麼它的capInsets在哪裡呢？打開圖片對應的.json文件，代碼如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | { "images" : [ { "resizing" : { "mode" : "9-part", "center" : { "mode" : "tile", "width" : 42, "height" : 92 }, "cap-insets" : { "bottom" : 0, "top" : 95, "right" : 41, "left" : 0 } }, |
從文件可以看出來top、left、bottom、right對應的就是上左下右的指示線，看到mode為tile，就知道Image Slicing預設為平鋪縮放，對於width與Height是做什麼的呢？Width代表的是左側線（或者上方線）和中間線之間的區域，Height代表的是上側線和中間線之間的區域。
看一下剛纔圖片運行起來的效果
測試結果
很神奇呀！灰色區域都會被隱藏，我們發現灰色區域位於右側線與中間線或者下方線與中間線之間。來分析一下各個數字的平鋪：
- 3位與右側線的右側，不會發生變化
- 1位與左側線與中間線之間，Y軸保持比例不變，X軸平鋪
- 6位與右側線的右側，但是也位與上方線與中間線之間，所以會保持X軸不變，Y軸平鋪
- 4位與左側線與中間線之間，同時也位與上方線與中間線之間，會填充其他所有的空餘區域。
好繞啊！還是可視化比較簡單，只要手動調試一下，就可以比較直觀的看到效果，希望可以幫到你，Demo可以進行下載。
問啊-定製化IT教育平臺，牛人一對一服務，有問必答，開發編程社交頭條 官方網站：www.wenaaa.com
QQ群290551701 聚集很多互聯網精英，技術總監，架構師，項目經理！開源技術研究，歡迎業內人士，大牛及新手有志於從事IT行業人員進入！
