コアグラフィックスによるイメージエフェクト

Question

私はいくつかのMacとiPhoneアプリケーションで見ることのできるイメージエフェクトを再現する方法を知りたいと思います。それらはすべて白黒の画像から始まります： - iPhoneのUiTabbarでは、白い画像が選択されたときに青いグラデーションになる - MacではTwitterで、いくつかの効果（グロー、ベベル、...）を見ることができます

このトピックのヘルプは大歓迎です。 :)

編集：私はMAC OSではなく、iPhone上でこれらの影響に興味があります。

Answer 1

残念ながら、iOSには、これらの美しいエフェクトのソースであるMacOSXで利用可能なCore Imageフレームワークが欠けています。 UITabBarエフェクトは、Core Graphicsマスククリッピング機能を使用して再作成できます（たとえば

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

を参照）。マスキングは画像のアルファに基づいており、すべてのタブバーのボタンはアルファベースです（アルファベットではない画像をタブバーに追加しようとすると、最終的な効果が表示されます）。 最後に、XCodeのドキュメント hereに含まれている

GLImageProcessing

の例を見ることができます。これは、OpenGL ES 1.1を使っていくつかの基本的な画像処理を行う方法を説明しています（この例は、 UIKitベースのアプリケーションではOpenGLビュー）。

Answer 2

他のソフトウェア（Photoshop、Pixelmatorなど）で作成した画像でも同じことができるので、それらを描画する必要はないと思います。 なぜですか？ （ボタンの）コンテンツは変更されないので、サイズ変更されないので、画像は見やすく、ここで最も簡単な方法です。

Quartzを使用して描画する方法を知りたい場合は、Apple開発者センターおよび/またはXcodeに多数のドキュメントとサンプルがあります。

これはマット・ギャラガーから1つの最近のチュートリアルです：Advanced drawing using AppKit

Answer 3

は、Appleの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);