en

hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you!

zh

哦哦!您正在使用Internet Explorer 瀏覽器,它與我們的網頁標準並不相容,可能會導致畫面顯示不正常。
請改用 Mozilla Firefox 或者 Google Chrome 才能正常瀏覽本網站,謝謝!

10.13.2011

透過改變 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]];
}






沒有留言:

張貼留言