iOS開發--圖片處理
縱觀現實社會和移動app市場,這是一個看臉的時代,而好看且漂亮的APP介面就是移動APP的臉.漂亮的外觀後面少不了UI設計人員的辛苦,如果不懂的處理,就浪費了UI設計人員的心血. 比如下面這張圖片,是用來做按鈕圖片的 大小為:59 * 32 先在把它作為一張圖片顯示出來,圖片顯示位置設定為200 * 50
1 #import "ViewController.h" 2 3 @interface ViewController () 4 5 @end 6 7 @implementation ViewController 8 9 - (void)viewDidLoad {10 [super viewDidLoad];11 // 對圖片的展開12 [self stretchPhoto]; 13 }14 15 - (void)stretchPhoto16 {17 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(60, 180, 200, 50)];18 imageView.image = [UIImage imageNamed:@"btnbg_blue.png"];19 [self.view addSubview:imageView];20 }21 22 @end
我們可以清晰的看到,圖片失去了原來的樣子,尤其是四個角,這是因為圖片本身大小為:59 * 32,而設定的圖片顯示位置的大小為200 * 50 ,圖片被拉壞了. 下面我們對這張圖片設定一個展開點:
1 #import "ViewController.h" 2 3 @interface ViewController () 4 5 @end 6 7 @implementation ViewController 8 9 - (void)viewDidLoad {10 [super viewDidLoad];11 12 // 對圖片的展開13 [self stretchPhoto];14 }15 16 // 對圖片的展開17 - (void)stretchPhoto18 {19 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(60, 180, 200, 50)];20 [self.view addSubview:imageView];21 22 // 設定圖片的展開點23 UIImage *images = [UIImage imageNamed:@"btnbg_blue.png"]; // 59 * 3224 images = [images stretchableImageWithLeftCapWidth:30 topCapHeight:16];25 imageView.image = images;26 }27 28 @end
可以清楚的看到圖片被完美的展開顯示了. 下面對設定圖片展開點的方法做一個詳解:
1 - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;2 @property(nonatomic,readonly) NSInteger leftCapWidth; // default is 0. if non-zero, horiz. stretchable. right cap is calculated as width - leftCapWidth - 13 @property(nonatomic,readonly) NSInteger topCapHeight; // default is 0. if non-zero, vert. stretchable. bottom cap is calculated as height - topCapWidth - 1
上面的內容是Xcode文檔中對該方法的解釋 第1行是方法名,傳回值為UIImage對象,需要傳遞兩個NSInteger類型的參數; 第2行和第3行是第1行需要傳遞參數的兩個屬性,預設都是0;從其他地方看到這兩個屬性由一個名字叫:端蓋,即左端蓋寬和頂端蓋高. 這樣看來,展開圖片的話,左側和頂部都展開了,那麼右側和底部呢? API文檔給出了計算公式:rightCapWidth = image.size.width - (image.leftCapWidth + 1); 即:右端蓋寬 = 圖片寬 - (左端蓋寬 + 1); bottomCapHeight = image.size.height - (image.topCapHeight + 1); 即:底部端蓋 = 圖片高 - (頂部端蓋 + 1); 這樣可以看出,最後被展開的位置就是給定左端蓋和頂部端蓋交叉位置旁邊 1 * 1 的地區(中間黃色地區),即這種方式只展開給定地區的 1 * 1 個點. 一般來說,習慣給定圖片寬和高一半的位置,這樣可以避免不清楚邊緣變化引起的不必要的麻煩.