iOS圖片拉伸技巧—— resizableImageWithCapInsets

原先以為很簡單的東西,到了實際做的時候,才發(fā)現(xiàn)這里出錯那里不對。浪費很多時間,究根結(jié)底,還是沒有弄清楚文檔。

在iOS5, UIImage添加了可以拉伸圖片的函數(shù),即:

 [UIImage resizableImageWithCapInsets:(UIEdgeInset){#top#,#left#,#bottom#,#right#}]

UIEdgeInset 是一個結(jié)構(gòu)體 定義如下:

Creates and returns a new image object with the specified cap insets.

Discussion

You use this method to add cap insets to an image or to change the existing cap insets of an image. In both cases, you get back a new image and the original image remains untouched.

During scaling or resizing of the image, areas covered by a cap are not scaled or resized. Instead, the pixel area not covered by the cap in each direction is tiled, left-to-right and top-to-bottom, to resize the image. This technique is often used to create variable-width buttons, which retain the same rounded corners but whose center region grows or shrinks as needed. For best performance, use a tiled area that is a 1×1 pixel area in size.

上左下右4參數(shù)定義了cap inset,就是離四條邊的距離。拉升時,cap到邊的部分不會被拉升,其余部分則會被拉升。尤其需要注意的時,拉升的時候,是從左到右,從上到下的方向。通俗點說,拉升不是全方向的拉升,而是垂直和水平拉升的疊加。

1
1

開始我設(shè)置參數(shù){20,10,10,10},在圖上的位置大致:


2
2

這樣拉升的結(jié)果:

3
3

很奇怪是不是,為什么出現(xiàn)了兩個箭頭(紅色部分是設(shè)置的背景色用語區(qū)分)?再回頭看下文檔,才恍然大悟:

1.拉升的時候,是按前文說的兩個方向來拉升
2.拉升的部分,是以tiled方式,簡單的說就是以鏡像的方式

按照1的規(guī)則,拉升的時候,水平和垂直方向都需要拉升。這樣在水平拉升的時候,箭頭其實處于拉升的部分。而拉升的時候,先按照原有的尺寸添加進(jìn)去,不足的地方再把中間不拉升的部分填充進(jìn)去,周而復(fù)始,直到填充完畢。因此,就有上面的現(xiàn)象了。

要達(dá)到需要的效果,必須按照如下的設(shè)置:

![4] (http://o7b4rtbje.bkt.clouddn.com/imageRight.png)

于是得到了我們需要的效果:

5
5

說實話,這個函數(shù)在iOS5 beta的時候就知道了,可是一直是不正確的理解。直到今天需要用到的時候,才發(fā)現(xiàn)一直沒理解對。于此同時,也發(fā)現(xiàn)自己 局限在工作相關(guān)的部分,工作以外的東西不是光知道就可以,還是需要去實踐的。否則,就會遇到今天的情形,被個小問題,折磨了好久。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)自:http://www.cnblogs.com/scorpiozj/p/3302270.html 最近在sae...
    longbin閱讀 489評論 0 1
  • 本章中迄今為止的繪制實施例中大多會產(chǎn)生一個UIImage對象,主要是通過調(diào)用UIGraphicsBeginImag...
    shenzhenboy閱讀 1,431評論 0 4
  • “靈魂轉(zhuǎn)世、輪回”,我一直以為這是我們才有的文化,近些年的穿越小說也把相關(guān)的題材寫了個遍。所以讀完《在另一種...
    塞外煙閱讀 923評論 0 0
  • 我一邊不敢去打聽的動態(tài),一邊糾結(jié)自己還該不該堅持,或者說,我這樣的無謂又有什么結(jié)局呢?我又有多大的幾率能夠確定給自...
    李小婪閱讀 189評論 1 0
  • 『文/玖見憶歡』 天藍(lán)藍(lán),云蒼茫,陽光微熏,氣息溫和,清風(fēng)徐徐,任卿抬眼看著天空,昨天的雨洗滌了整個天際,顯得今天...
    玖見憶歡閱讀 208評論 0 2

友情鏈接更多精彩內(nèi)容