Just a Computer Graphics Studio & My Life

[iOS] 拉伸影像 (Stretch Image)

iPhone發展至今已有至少4種尺寸,如3.5、4、4.7、5.5吋,我們想要在螢幕上顯示等比例的影像,這張影像不是要準備四張圖,就是必須拉伸那一張圖。我們現在想要使用一張按鈕圖,在四種尺寸上顯示為靠左右邊,這麼小張(49×49)的圖勢必要做拉伸影像 (Stretch Image)

button_y

只提供一種尺寸的好處是節省設備的空間,也讓美術設計師省去產生圖檔的時間。

我們想要如下的效果⋯⋯

iOS 拉伸影像 Stretch Image3

Xcode中的IB拉出一個Image View,設定我們的圖檔,將會發現有鋸齒狀!這根本不是我們想要的樣子啊⋯⋯

iOS 拉伸影像 Stretch Image

原始設定

發現可以在IB上調整參數,逐漸地變成我們想要的樣子囉~

iOS 拉伸影像 Stretch Image2

至於原理是什麼,有時間再研究吧~

除了能在IB上調整外,我們還想在code中設定!

    UIImage *roundedImage = [UIImage imageNamed:@"button_y.png"];
    roundedImage = [roundedImage stretchableImageWithLeftCapWidth:15 topCapHeight:15];
    myImageVIew.image = roundedImage;

如此就能產生跟首圖類似的效果,為什麼說是「類似」,因為這兩個實作方式不一樣,在IB中我要調整四個參數,而在code裡我要設定兩個參數。

IMG_2383

這支method我有找到示意圖,還滿好理解,是固定左上角的區塊,拉伸那區塊的下一個像素⋯⋯仔細看其實是保留四個角(左上、左下、右上、右下),延展左上區塊的下一個像素。

stretch

stretch2

參考:線上產生客製按鈕圖Stretchable Images iOS7 TutorialiOS – UIImage resize and stretch

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: