對于圖片拉伸是移動開發(fā)中很常見的需求，在前一陣子做項目中需要做一個類似于QQ聊天氣泡，這個氣泡會根據(jù)文字的多少而變化，當(dāng)時有了三種方案：
- 重寫
drawRect方法，使用貝賽爾曲線畫一個氣泡 - 用一個大圖作為背景，管它怎么拉伸，肯定不會變形
- 使用圖片，同時使用系統(tǒng)提供的
API對圖片進(jìn)行局部拉伸
來分析一下這三種做法利弊：
- 第一種：勞民傷財，
drawRect的使用帶來離屏渲染，如果滑動聊天界面將使內(nèi)存急劇增加,同時我也不會使用貝賽爾曲線，嗚嗚！ - 第二種：大圖的話，顯然所占空間會比較大，這樣導(dǎo)致最后的安裝包較大，尺寸不合適的圖片加載也會對性能有所影響
- 第三種：顯然這是一種劃算的做法，對于怎么進(jìn)行局部拉伸也是這篇博客的重點
代碼實現(xiàn)圖片縮放
至于 iOS 5 之類的方法，這里就不再談了。在 iOS 6 的時候，系統(tǒng)為我們提供了這樣一個方法
public func resizableImageWithCapInsets(capInsets: UIEdgeInsets, resizingMode: UIImageResizingMode) -> UIImage
對于拉伸的方式，有以下兩種：
-
IUIImageResizingModeStretch：拉伸模式，通過拉伸UIEdgeInsets指定的矩形區(qū)域是我們要保護的區(qū)域，也就是不被拉伸的區(qū)域 -
UIImageResizingModeTile：平鋪模式，通過重復(fù)顯示UIEdgeInsets指定的矩形區(qū)域是要保護的區(qū)域，也就是不被重復(fù)顯示的區(qū)域
拉伸模式
來做四個測試，假如我們的原始圖像尺寸為60*128當(dāng)我們設(shè)置capInsets為以下四種值的時候有什么樣子的效果：
-
1:
capInsets參數(shù)為UIEdgeInsetsMake(0, 0, 0, 0) -
2:
capInsets參數(shù)為UIEdgeInsetsMake(42, 0, 0, 0) -
3:
capInsets參數(shù)為UIEdgeInsetsMake(0, 20, 0, 0) -
4:
capInsets參數(shù)為UIEdgeInsetsMake(42, 20, 42, 20)
在一個180*384的窗口進(jìn)行測試圖像，對于實踐的結(jié)果，可以在這個地址中看到。
四種測試結(jié)果是：
- 1: 原始圖像拉伸，比例放大
- 2: 我們對圖片上面的區(qū)域進(jìn)行了保護，其他區(qū)域進(jìn)行了拉伸，保護區(qū)域在Y軸保持了原比例，但是X軸方向進(jìn)行了拉伸
- 3: 我們對圖片的左側(cè)區(qū)域進(jìn)行了保護，其他區(qū)域進(jìn)行了拉伸，保護區(qū)域在X軸保持了原比例，但是在Y軸方向進(jìn)行了拉伸
- 4: 我們對除了中心區(qū)域的位置進(jìn)行了保護，中心區(qū)域進(jìn)行了拉伸，四個角進(jìn)行了雙層保護，其余被保護區(qū)域在X、Y軸的拉伸與第2、3種情況下相同，效果圖如下：
平鋪模式
與上面的場景相同，只不過不再拉伸，改為平鋪的方式，來嘗試以下四種情況：
-
1:
capInsets參數(shù)為UIEdgeInsetsMake(0, 0, 0, 0) -
2:
capInsets參數(shù)為UIEdgeInsetsMake(42, 0, 0, 0) -
3:
capInsets參數(shù)為UIEdgeInsetsMake(0, 20, 0, 0) -
4:
capInsets參數(shù)為UIEdgeInsetsMake(42, 20, 42, 20)
在一個180*384的窗口進(jìn)行測試圖像，對于實踐的結(jié)果，可以在這個地址中看到。
結(jié)論就是：
- 1: 按比例平鋪
- 2: 我們對圖片上面的區(qū)域進(jìn)行了保護，其他區(qū)域按比例平鋪，保護區(qū)域在Y軸保持了原比例，但是X軸方向進(jìn)行了平鋪填充
- 3: 我們對圖片的左側(cè)區(qū)域進(jìn)行了保護，其他區(qū)域按比例平鋪，保護區(qū)域在X軸保持了原比例，但是在Y軸方向進(jìn)行了平鋪填充
- 4: 我們對除了中心區(qū)域的位置進(jìn)行了保護，中心區(qū)域按比例平鋪，四個角進(jìn)行了雙層保護，其余被保護區(qū)域在X、Y軸的平鋪與第2、3種情況下相同，效果圖如下：
注： 以上的代碼測試來自SketchK七爺
Image Slicing 可視化縮放
何為Image Slicing呢？，其實就相當(dāng)于一個可視化的resizableImageWithCapInsets，可以用于指定在圖片縮放時用來填充的像素。我們可以在Xcode的Assets.xcassets目錄中選擇要slicing的圖片，點擊圖片界面右下方的Show Slicing按鈕，在想要設(shè)定切片的圖片上點擊Start Slicing，將出現(xiàn)左中右（或者上中下）三條可以拖動的指示線，通過拖動它們來設(shè)定實際的縮放范圍。
我們剛才說，他就是可視化的resizableImageWithCapInsets，那么它的capInsets在哪里呢？打開圖片對應(yīng)的.json文件，代碼如下：
{
"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對應(yīng)的就是上左下右的指示線，看到mode為tile，就知道Image Slicing默認(rèn)為平鋪縮放，對于width與Height是做什么的呢？Width代表的是左側(cè)線（或者上方線）和中間線之間的區(qū)域，Height代表的是上側(cè)線和中間線之間的區(qū)域。
看一下剛才圖片運行起來的效果
很神奇呀！灰色區(qū)域都會被隱藏，我們發(fā)現(xiàn)灰色區(qū)域位于右側(cè)線與中間線或者下方線與中間線之間。來分析一下各個數(shù)字的平鋪：
- 3位與右側(cè)線的右側(cè)，不會發(fā)生變化
- 1位與左側(cè)線與中間線之間，Y軸保持比例不變，X軸平鋪
- 6位與右側(cè)線的右側(cè)，但是也位與上方線與中間線之間，所以會保持X軸不變，Y軸平鋪
- 4位與左側(cè)線與中間線之間，同時也位與上方線與中間線之間，會填充其他所有的空余區(qū)域。
好繞啊！還是可視化比較簡單，只要手動調(diào)試一下，就可以比較直觀的看到效果，希望可以幫到你，Demo可以進(jìn)行下載。
