透過改變 Frame 或 Bounds 大小的方式來切割影像

 

當一個 View 被建立時，它一定包含 Frame 和 Bounds 這兩種屬性，Frame 決定了 View 的大小與它的位置，而 Bounds 則是決定在 View 中要顯示影像的位置與大小。當 Bounds 等於 Frame 時（預設），我們可以看到完整的整張影像，但是當 Bounds 小於 Frame 時，我們只能看到位在 Bounds 視野內的部分影像，下面示範就是要使用此原理來對原始影像行切割（本示範中所使用的圖片素材為網路資源並僅供教學使用）。

若是想要透過改變  Frame 或 Bounds 來切裁影像，需注意以下幾點：

• ContentMode 屬性
  

這個屬性決定影像在畫面中的呈現方式，像是自動縮放填滿畫面（UIViewContentModeScaleToFill）或是本範例中所使用的以畫面下方為基準來顯示圖片（UIViewContentModeBottom） 等，當然你也可以在 Interface Builder 中直接做設定，如下圖。

• setClipsToBounds 屬性

這個屬性為一個布林值，當值為 YES 時，畫面會自動切除影像超出 Bounds 的部份。 

• setOpaque 屬性

這個屬性同樣也是布林值，它的作用在於決定能不能接收具有透明度的背景影像，當值為 YES 時，表示畫面背景應不具透明度，此時畫面內所有據有透明度的影像都會使用黑色來代替。

回到本範例，我們使用許多不同的靜態 UIImageView 彼此交疊，類似繪圖軟體中的圖層的概念，而程式碼指控制其中一個 UIImageView 圖層（紅色球體）來做改變 Frame 大小範圍的切割，並搭配 CoreAnimations 來模擬玻璃球中紅色液體增加和減少的效果。

首先是包含紅色球體的 UIImageView 設定部份。

//hpOrb為UIImageView型態並與到Interface Builder上的物件做好連結
[hpOrb setContentMode:UIViewContentModeBottom];
UIImage *redOrb = [UIImage imageNamed:@"hp_orb.png"];
[hpOrb setImage:redOrb];
[hpOrb setOpaque:NO];
[hpOrb setClipsToBounds:YES];

接著就是當按下畫面上增加或是減少按鈕時所觸發的事件，以下程式碼僅列出減少按鈕所觸發的事件。

//取得當前frame的大小
CGPoint hpOrbPoint = hpOrb.frame.origin;
CGSize hpOrbSize = hpOrb.frame.size;

if (hpOrbSize.height > 50) {

    //動畫設定
    [UIView beginAnimations:@"FirstAid" context:nil];
    [UIView setAnimationDuration:0.6];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(showHpLabel)];
    [UIView setAnimationBeginsFromCurrentState:YES];

    //每次減少50個單位（frame縮小50單位）
    [hpOrb setFrame:CGRectMake(hpOrbPoint.x, hpOrbPoint.y + 50, hpOrbSize.width, hpOrbSize.height - 50)];

     //開始動畫
     [UIView commitAnimations];
}


最後就是在動畫結束時所呼叫的 showHpLabel 函式，這裡我們用來設定紅色液體載玻璃球中所佔的百分比。

- (void)showHpLabel {

    //計算百分比
    double p = (hpOrb.frame.size.height / 256.0) * 100;
    [hpLabel setText:[NSString stringWithFormat:@"%.f%%", p]];
}