iOS中圖片(UIImage)拉伸技巧

iOS中圖片拉伸技巧與方法總結

1、瞭解幾個圖像拉伸的函數和方法

一、直接拉伸法

簡單暴力，倒是最最經常使用的方法，直接將圖片設置爲ImageView的image屬性，圖片便會隨UIImageView對象的大小作自動拉伸。這種拉伸的方法有一個致命的缺陷，它會使圖像發生失真與形變。

二、像素點的拉伸

 

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;

這個函數咱們能夠用來拉伸相似QQ，微信的聊天氣泡背景圖，它的兩個參數分別leftCapWidth和topCapHeight，這兩個參數給定一個座標，好比：

    UIImage * img= [UIImage imageNamed:@"11.png"];
    img = [img stretchableImageWithLeftCapWidth:1 topCapHeight:1];

這段代碼的意思是將圖片從左起第2列，上起第2行，座標爲(2,2)的像素點進行復制。將圖片進行拉伸。這個方法和上面的方法比起來彷佛靈活性更多了，但其也有它的一些侷限，若是被拉伸的圖片中間也有須要拉伸的像素，這個方法就無能爲力了，例如，以下的一張圖片，咱們須要將其拉伸放大：

便會出現這樣的效果：

這明顯和咱們的意圖是不符的，那麼，咱們可使用下面的方法。

三、區域的拉伸

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets;

這個函數須要設置一個UIEdgeInsets參數，UIEdgeInsets結構體以下：

typedef struct UIEdgeInsets {
    CGFloat top, left, bottom, right; 
} UIEdgeInsets;

它分別對用了圖片進行拉伸的區域距離頂部、左部、下部、右部的像素。好比，一個10*10像素的圖片，將UIEdgeInsets參數所有設置爲1，則實際拉伸的部分就是中間的8*8的區域的像素。有一點須要注意，這個方法默認使用的拉伸模式是區域複製，好比仍是上面的圖案，以下代碼拉伸：

    UIImage * img= [UIImage imageNamed:@"11.png"];
    img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)];

結果以下：

能夠明顯的看到中間的虛線，這即是區域複製的傑做。

那麼問題又來了，若是某些圖片中間有漸變，咱們該怎麼處理了，來看下一個函數。

四、拉伸模式的設置

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode;

這個函數和上一個函數相比，惟一的差異是多了一個參數。這個參數是個枚舉，以下：

typedef NS_ENUM(NSInteger, UIImageResizingMode) {
    UIImageResizingModeTile,//進行區域複製模式拉伸
    UIImageResizingModeStretch,//進行漸變複製模式拉伸
};

如今就明瞭了，咱們只須要設置一下模式，就能夠實現漸變拉伸了：

    UIImage * img= [UIImage imageNamed:@"11.png"];
    img = [img resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1) resizingMode:UIImageResizingModeStretch];

來看一下效果：

2、拉伸的用武之地

圓角按鈕，空心按鈕，漸變的背景，內容可變的標籤，聊天氣泡等等這樣的素材在APP中極可能會屢次出現，而且每次出現的尺寸可能還會略微有些差別，若是僅僅依靠美工的素材，恐怕不只很難達到要求，也會額外增長軟件的內存開銷，這時，咱們使用恰當的拉伸技巧，能使咱們的代碼更加健壯，APP更加高效。

3、一點小經驗

你是否注意觀察過最細的線？

看到上面的問句，你可能有些差別。最細的線不就是一像素麼？確實，能繪圖畫出來的最細的實心線確實是一像素，但在一個項目中，咱們優秀的美工察覺到不管她把線作的多麼細，不管我怎樣控制拉伸方法，繪製出的登陸框老是沒有QQ的細，QQ的框線看起來更加乾脆利索。後來索性用繪圖畫出登陸框，結果很不幸，我依然沒法將線作到像QQ登陸框那樣細緻。後來偶然試了一種方法，不知原理是否正確，效果總算達到了，固然這也要歸功於咱們的美工，她將一個圖片作的很大，適配最大的分辨率，而後讓我手動縮，如此一來，那線就變得很是細。

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592