核心圖形的圖像效果

Question

我想知道如何重現圖像效果，我們可以在幾種Mac和iPhone應用程序中看到它們全部從黑白圖像開始： - 在iPhone上的UiTabbar中，黑色和當它被選中時，白色圖片變成藍色漸變 - 在Twitter上，對於mac，我們可以看到幾種效果（發光，斜角，....）

歡迎您就此主題提供任何幫助。 :)

編輯：我對MAC操作系統，而不是在iPhone上的這些影響感興趣。

Answer 1

不幸的是，iOS缺乏MacOSX中的Core Image框架，它是所有這些美麗效果的來源。 UITabBar特效可以使用Core Graphics蒙板特徵重新創建（例如參見

void CGContextClipToMask (
    CGContextRef c, 
    CGRect rect, 
    CGImageRef mask 
); 

）。這是可能的，因爲蒙版是基於圖像阿爾法和所有標籤欄按鈕是基於阿爾法的（嘗試在標籤欄添加一個不是基於alpha的圖像，你會看到最終的效果......）。 最後，您可以看看

GLImageProcessing

包含在XCode文檔或 here中的示例：這解釋瞭如何使用OpenGL ES 1.1進行一些基本的圖像處理（通過該示例包含一些基本的紋理和渲染方法，您可以重新使用以集成任何基於UIKit的應用程序中的OpenGL視圖）。

Answer 2

我不認爲有必要畫這些，因爲他們可以獲得與其他軟件（Photoshop，像素等）完成的圖像相同。 爲什麼？因爲（按鈕的）內容不會改變，不會調整大小，所以圖像很好看，也是最簡單的方法。

如果您想了解如何使用Quartz進行繪製，Apple開發中心和/或Xcode中有許多文檔和示例。

這是馬特·加拉格爾最近的一個教程：Advanced drawing using AppKit

Answer 3

退房蘋果QuartzDemo示例項目。 QuartzClipping類向您展示瞭如何使用剪裁和遮罩。這是我根據這個項目計算出來的結果。

CGContextRef context = UIGraphicsGetCurrentContext(); 

UIImage *img = [UIImage imageNamed:@"at.png"]; 
CGImageRef alphaImage = CGImageRetain(img.CGImage); 

UIImage *backgroundImg = [UIImage imageNamed:@"gradientBackground.png"]; // background image for normal state 
CGImageRef image = CGImageRetain(backgroundImg.CGImage); 


CGFloat height = self.bounds.size.height; 
CGContextTranslateCTM(context, 0.0, height); 
CGContextScaleCTM(context, 1.0, -1.0); 

CGContextSetRGBFillColor(context, 0.129, 0.129, 0.129, 1.0); 
CGContextFillRect(context, self.bounds); 

CGContextSaveGState(context); 
CGContextClipToMask(context, CGRectMake(100.0, height - 150.0, img.size.width, img.size.height), alphaImage); 
CGContextDrawImage(context, CGRectMake(100.0 - (backgroundImg.size.width-img.size.width)/2, 
             height - 150 - (backgroundImg.size.height-img.size.height)/2, 
             backgroundImg.size.width, 
             backgroundImg.size.height), image); 
CGContextRestoreGState(context); 



UIImage *backgroundImg2 = [UIImage imageNamed:@"TabBarItemSelectedBackground.png"]; // background image for selected state 
CGImageRef image2 = CGImageRetain(backgroundImg2.CGImage); 

CGContextSaveGState(context); 
CGContextClipToMask(context, CGRectMake(180.0, height - 150.0, img.size.width, img.size.height), alphaImage); 
CGContextDrawImage(context, CGRectMake(180.0 - (backgroundImg2.size.width-img.size.width)/2, 
             height - 150.0 - (backgroundImg2.size.height-img.size.height)/2, 
             backgroundImg2.size.width, 
             backgroundImg2.size.height), image2); 
CGContextRestoreGState(context); 


CGImageRelease(image); 
CGImageRelease(alphaImage); 
CGImageRelease(image2);