天天看點

[UIImage resizableImageWithCapInsets:]使用注意

最近在sae上搭建了個wp,因為深感自己前端的東西缺乏,是以想依次為契機,學習一下。本文是從個人的sae版wp轉載過來。

本篇也是在實作微網誌過程中遇到的問題。原先以為很簡單的東西,到了實際做的時候,才發現這裡出錯那裡不對。浪費很多時間,究根結底,還是沒有弄清楚文檔。

在iOS5, UIImage添加了可以拉伸圖檔的函數,即:

[UIImage resizableImageWithCapInsets:]

它帶參數: UIEdgeInsets,這是一結構體,包含 上/左/下/右四個參數。函數的作用我們看下文檔:

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參數定義了cap inset,就是離四條邊的距離。拉升時,cap到邊的部分不會被拉升,其餘部分則會被拉升。尤其需要注意的時,拉升的時候,是從左到右,從上到下的方向。通俗點說,拉升不是全方向的拉升,而是垂直和水準拉升的疊加。

以我遇到的問題為例,我的圖檔是170×50, 需要填充到240×140,但是四周的圓角以及小箭頭保持原樣,如圖:

[UIImage resizableImageWithCapInsets:]使用注意

開始我設定參數{20,10,10,10},在圖上的位置大緻:

[UIImage resizableImageWithCapInsets:]使用注意

這樣拉升的結果:

[UIImage resizableImageWithCapInsets:]使用注意

很奇怪是不是,為什麼出現了兩個箭頭(紅色部分是設定的背景色用語區分)?再回頭看下文檔,才恍然大悟:

拉升的時候,是按前文說的兩個方向來拉升

拉升的部分,是以tiled方式,簡單的說就是以鏡像的方式

按照1的規則,拉升的時候,水準和垂直方向都需要拉升。這樣在水準拉升的時候,箭頭其實處于拉升的部分。而拉升的時候,先按照原有的尺寸添加進去,不足的地方再把中間不拉升的部分填充進去,周而複始,直到填充完畢。是以,就有上面的現象了。

要達到需要的效果,必須按照如下的設定:

[UIImage resizableImageWithCapInsets:]使用注意

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

[UIImage resizableImageWithCapInsets:]使用注意

Binggo~ 一切完畢。

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

本文轉自夏雪冬日部落格園部落格,原文連結:http://www.cnblogs.com/heyonggang/p/3482733.html,如需轉載請自行聯系原作者

繼續閱讀