返回列表 發帖

[原創範例] 簡單的Dynamic Image Masking

最近一兩個月都在搞個大項目(對我來說 @@),
幾乎我學過的都用上,沒學過的也變熟了,
其中,在Image Masking上剛好遇過瓶頸,也順利解決了,
寫點心得給大家參考一下,希望可以幫助到遇到類似問題的人

常用Core Graphic或Quartz的朋友就不需要看啦,我想你們應該很熟了
-------------------------------------------------------------------------------------------

用一個已知的Image去做mask很常見,不是這篇要介紹的範圍,
這篇要講的部份可以參考底下link的圖

如果想要動態產生上面那層的mask,方法也不少,
這邊提供一個簡單又容易理解,但是在大圖顯示上可能會有performance issue的笨方法

下面是overwrite drawRect來畫底圖跟mask的code
  1. - (void)drawRect:(CGRect)rect {
  2.         CGContextRef context = UIGraphicsGetCurrentContext();
  3.         // 確保圖不會倒立
  4.         CGContextTranslateCTM(context, 0, self.frame.size.height);
  5.         CGContextScaleCTM(context, 1, -1);
  6.         // 先畫底圖
  7.         CGContextDrawImage(context, self.bounds, imageRef);
  8.         // 填上mask顏色
  9.         CGContextSetRGBFillColor(context, 0.7, 0.7, 0.7, 0.3);
  10.         CGContextFillRect(context, rect);
  11.         // 剪下某一塊區域
  12.         CGContextClipToRect(context, selectedRegion);
  13.         // 再畫一次底圖
  14.         // 因為前面剪下來的區域只有xx大小,所以畫上去的只有本來圖的xx部份
  15.         CGContextDrawImage(context, self.bounds, imageRef);
  16.         // 畫選擇區域的邊界
  17.         CGContextSetRGBStrokeColor(context, 0.14, 0.0, 1.0, 1.0);
  18.         CGContextStrokeRectWithWidth(context, selectedRegion, 2.0);

  19.         [super drawRect:rect];
  20. }
複製代碼
結果就像...


那如果想要選擇區域被mask呢?那就更簡單了
  1.        
  2.         CGContextDrawImage(context, self.bounds, imageRef);

  3.         CGContextClipToRect(context, selectedRegion);
  4.         CGContextSetRGBFillColor(context, 0.7, 0.7, 0.7, 0.3);
  5.         // 這裡用rect或selectedRegion皆可,因為只剪下來selectedRegion,所以也只會畫這裡
  6.         CGContextFillRect(context, rect);
  7.        
  8.         CGContextSetRGBStrokeColor(context, 0.14, 0.0, 1.0, 1.0);
  9.         CGContextStrokeRectWithWidth(context, selectedRegion, 2.0);
複製代碼
效果就像是這樣...


需要rectangle以外的圖形,請自己畫path,然後用CGContextClip就可以有一樣效果了
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊
1

評分人數

感謝閣下的分享呀 ^_^ 受用不淺,先收下了 ^_^
好樣的,收起來
感謝分享
對我這種初學者真是受用, 感謝!!
感謝分享
感謝分享
日上創意科技有限公司
http://sayhong.net
遊戲、電子書出版
感謝分享,頂一下
学习了,请问可以转载下么,谢谢
不错不错。。。感谢分享。
神馬一切都是浮雲
非常棒的一個範例
Very Good !!
返回列表