核心图形技术中的图像效果

Question

我想知道如何复制在几个Mac和iPhone应用程序中看到的图像效果，它们都是从黑白图片开始的： - 在iPhone上的UiTabbar中，当选择它时，黑白图片如何变成蓝色渐变 - 在Twitter for Mac中，我们可以看到几种效果（发光，斜角等）

关于这个主题的任何帮助都是受欢迎的。 :) 编辑：我对MAC OS上的这些效果感兴趣，而不是iPhone。

- AP.

Answer 1

查看苹果的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);

- htinlinn

Answer 2

Unfortunately iOS is lacking the Core Image framework available in MacOSX, which is the source of all those beautiful effects. The UITabBar effects can be re-created using Core Graphics mask clipping features (see for example

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

). This is possible because masking is based on image alpha and all tab bar buttons are alpha based (try to add in a tab bar an image which is not alpha based and you will see the final effect...). Finally you can have a look at

GLImageProcessing

example contained in XCode documentation or here: this explains how to do some basic image processing using OpenGL ES 1.1 (by the way this example contains some basic texturing and rendering methods that you can reuse to integrate any OpenGL view in your UIKit based app).

- viggio24

Answer 3

我认为没有必要绘制这些图形，因为你可以使用其他软件（如Photoshop、Pixelmator等）创建相同的图像。为什么呢？因为按钮的内容不会改变，也不会被调整大小，所以图像看起来很好，而且这是最简单的方法。

如果你想学习如何使用Quartz进行绘图，在苹果开发中心和/或Xcode中有很多文档和示例。

这是Matt Gallagher的一个最新教程：使用AppKit进行高级绘图

- nacho4d

---

问题是如何从代码中获取它，而不使用Photoshop。不，这种效果的文档并不多。关于您的教程，它并非由Matt Gemmell编写（他确实制作了很棒的代码）。 - AP.

你链接的那个教程是由Matt Gallagher撰写的，而不是Matt Gemmell。 - user557219