圖片拉伸詳解

導(dǎo)語(yǔ):

有時(shí)候?qū)σ粋€(gè)圖片進(jìn)行常規(guī)的縮放達(dá)不到我們想要的效果西雀,比如聊天氣泡的大小、帶邊框的按鈕背景。通常我們會(huì)設(shè)置某個(gè)偏移值對(duì)圖片進(jìn)行拉伸來(lái)實(shí)現(xiàn)我們想要的效果。iOS6以后有兩條相似的API可以解決這一問(wèn)題松邪,下文簡(jiǎn)稱帶模式的縮放和不帶模式的縮放。

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

下面是官方文檔對(duì)API的解釋:

Each inset defines the potion of the image that does not stretch in the given dimension. The regions inside an image’s top and bottom insets maintain a fixed height, and the areas inside the left and right insets maintain a fixed width. Figure 2 shows how each part of a nine-part image stretches as the image itself is stretched to fill the available space. The corners of the image do not change size because they are inside both a horizontal and vertical inset.

也就是說(shuō)會(huì)傳入一個(gè)UIEdgeInsets類型的結(jié)構(gòu)體將UIImage分為9個(gè)(也有可能是2個(gè))部分哨查,并對(duì)其中間部分和四個(gè)邊進(jìn)行縮放逗抑,但是四個(gè)角會(huì)保持不變。

圖1

下面分別介紹這兩條API寒亥。

不帶模式的縮放

縮放模式有兩種邮府,分別是UIImageResizingModeTile平鋪和UIImageResizingModeStretch拉伸。如果不指定縮放模式护盈,則會(huì)根據(jù)傳入UIEdgeInsets類型的結(jié)構(gòu)體的不同而進(jìn)行不同的縮放挟纱。
原文是這么說(shuō)的:

iOS uses different rendering techniques, with different performance characteristics, depending on the size of each resizable area in the image:

If resizable areas have a width or height of 1 pixel—that is, a horizontally resizable area is 1 pixel wide, a vertically resizable area is 1 pixel tall, or the center region of the image is 1 x 1 pixel—iOS draws the image by stretching the 1-pixel region. This mode provides the fastest performance (for nonzero cap insets).

If resizable areas have a width or height greater than 1 pixel, iOS draws the image by tiling the region. This mode provides reduced performance, but can be useful for images with textured (rather than solid-color) content in their resizable areas.

If the entire image is resizable—that is, the capInsets parameter is UIEdgeInsetsZero—and its size is greater than 1 x 1 pixel, iOS draws the image by tiling the entire image. This mode is faster than the tiling mode for nonzero cap insets.

也就是說(shuō),

  • 如果中間部分邊長(zhǎng)都小于或等于1,這種情況下可變部分從上往下腐宋、從左至右按一個(gè)像素偏移值按照拉伸模式來(lái)放大。若中間部分有一邊大于1檀轨,則大于1的那邊按平鋪模式縮放胸竞,小于1的那邊以一個(gè)像素的默認(rèn)偏移值按拉伸模式縮放。
  • 如果中間部分邊長(zhǎng)大于1x1参萄;在這種情況下可變部分按照平鋪模式來(lái)放大卫枝。
  • 如果中間部分大小等于圖片的大小,并且圖片大小大于1x1讹挎,也就是說(shuō)傳入的參數(shù)為UIEdgeInsetsZero,在這種情況下可變部分按照平鋪模式來(lái)放大校赤。

下面用一張對(duì)稱的圖片來(lái)測(cè)試吆玖,圖片大小是90x90,imageView大小為180x180马篮,上面是測(cè)試圖下面是原圖沾乘。

中間部分大小為0的情況,傳入的參數(shù)為:UIEdgeInsetsMake(image.size.height*0.5, image.size.width*0.5, image.size.height*0.5, image.size.width*0.5)

圖2

中間部分疊加(小于0)的情況浑测,傳入的參數(shù)為:UIEdgeInsetsMake(image.size.height*0.5, image.size.width*0.5, image.size.height*0.5+20, image.size.width*0.5+20)

圖3

中間部分邊長(zhǎng)均小于1的情況翅阵,傳入的參數(shù)為:UIEdgeInsetsMake(image.size.height*0.5, image.size.width*0.5, image.size.height*0.5-0.5, image.size.width*0.5-0.5)

圖4

中間部分邊長(zhǎng)均大于1的情況,傳入的參數(shù)為:UIEdgeInsetsMake(image.size.height*0.3, image.size.width*0.3, image.size.height*0.3, image.size.width*0.3)

圖5

中間部分等于圖片大小的情況迁央,傳入的參數(shù)為:UIEdgeInsetsZero

圖6

帶模式的縮放

這種縮放方式出現(xiàn)在iOS6+掷匠,官方說(shuō)明如下:

This method is exactly the same as its counterpart resizableImageWithCapInsets: except that the resizing mode of the new image object can be explicitly declared. You should only call this method in place of its counterpart if you specifically want your image to be resized with the UIImageResizingModeStretch resizing mode.

意思就是這種縮放方式和前面的差不多,除非你一定要用拉伸的方式來(lái)放大圖片岖圈,否則還是建議你使用不帶模式的方式來(lái)處理你的圖片讹语。

拉伸模式,傳入的參數(shù)為:UIEdgeInsetsMake(image.size.height*0.3, image.size.width*0.3, image.size.height*0.3, image.size.width*0.3)

圖7

平鋪模式蜂科,傳入的參數(shù)為:UIEdgeInsetsMake(image.size.height*0.3, image.size.width*0.3, image.size.height*0.3, image.size.width*0.3)

圖8

這兩種方法都不會(huì)改變?cè)瓐D顽决,而是返回一張新的圖片。其實(shí)在像素為1的情況下也看不出是平鋪模式還是拉伸模式(性能上拉伸模式好得多)崇摄,如果是純色背景兩種模式區(qū)別也不大擎值。anyway,知道總比不知道要強(qiáng)逐抑。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鸠儿,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子厕氨,更是在濱河造成了極大的恐慌进每,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件命斧,死亡現(xiàn)場(chǎng)離奇詭異田晚,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)国葬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門贤徒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人汇四,你說(shuō)我怎么就攤上這事接奈。” “怎么了通孽?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,345評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵序宦,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我背苦,道長(zhǎng)互捌,這世上最難降的妖魔是什么潘明? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,851評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮秕噪,結(jié)果婚禮上钳降,老公的妹妹穿的比我還像新娘。我一直安慰自己巢价,他們只是感情好牲阁,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,868評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著壤躲,像睡著了一般城菊。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碉克,一...
    開(kāi)封第一講書(shū)人閱讀 51,688評(píng)論 1 305
  • 那天凌唬,我揣著相機(jī)與錄音,去河邊找鬼漏麦。 笑死客税,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的撕贞。 我是一名探鬼主播更耻,決...
    沈念sama閱讀 40,414評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼捏膨!你這毒婦竟也來(lái)了秧均?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,319評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤号涯,失蹤者是張志新(化名)和其女友劉穎目胡,沒(méi)想到半個(gè)月后膊存,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體租幕,經(jīng)...
    沈念sama閱讀 45,775評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評(píng)論 3 336
  • 正文 我和宋清朗相戀三年谈息,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了域蜗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巨双。...
    茶點(diǎn)故事閱讀 40,096評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖霉祸,靈堂內(nèi)的尸體忽然破棺而出炉峰,到底是詐尸還是另有隱情,我是刑警寧澤脉执,帶...
    沈念sama閱讀 35,789評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站戒劫,受9級(jí)特大地震影響半夷,放射性物質(zhì)發(fā)生泄漏婆廊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,437評(píng)論 3 331
  • 文/蒙蒙 一巫橄、第九天 我趴在偏房一處隱蔽的房頂上張望淘邻。 院中可真熱鬧,春花似錦湘换、人聲如沸宾舅。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,993評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)筹我。三九已至,卻和暖如春帆离,著一層夾襖步出監(jiān)牢的瞬間蔬蕊,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,107評(píng)論 1 271
  • 我被黑心中介騙來(lái)泰國(guó)打工哥谷, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留岸夯,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,308評(píng)論 3 372
  • 正文 我出身青樓们妥,卻偏偏與公主長(zhǎng)得像猜扮,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子监婶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,037評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 教程一:視頻截圖(Tutorial 01: Making Screencaps) 首先我們需要了解視頻文件的一些基...
    90后的思維閱讀 4,700評(píng)論 0 3
  • 每年中考總會(huì)有很多同學(xué)在不經(jīng)意間丟掉了本不該丟的分旅赢,而這本來(lái)是完全可以避免的。相信大家都不想這樣的事情發(fā)生在自己身...
    gaosijiaoyu閱讀 203評(píng)論 0 0