核心图形的图像效果

时间:2011-02-06 10:43:20

标签: iphone cocoa image macos core-graphics

我想知道如何重现我们在几个Mac和iPhone应用程序中看到的图像效果,所有这些都是从黑白图片开始的: - 在iPhone上的UiTabbar中,黑白图片在选中时会变成蓝色渐变 - 在Twitter for mac中,我们可以看到几种效果(发光,斜角,......)

欢迎任何有关此主题的帮助。 :)enter image description here

编辑:我对这些对MAC OS的影响感兴趣,而不是对iPhone感兴趣。

3 个答案:

答案 0 :(得分: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);

答案 1 :(得分:2)

不幸的是,iOS缺少MacOSX中提供的Core Image框架,这是所有这些美丽效果的源头。可以使用Core Graphics蒙版剪切功能重新创建UITabBar效果(例如参见

void CGContextClipToMask (
   CGContextRef c,
   CGRect rect,
   CGImageRef mask
);
)。这是可能的,因为屏蔽是基于图像alpha并且所有标签栏按钮都是基于alpha的(尝试在标签栏中添加非基于alpha的图像,您将看到最终效果......)。 最后,您可以查看XCode文档中包含的
GLImageProcessing
示例或here:这解释了如何使用OpenGL ES 1.1进行一些基本的图像处理(这个示例包含一些基本的纹理和渲染方法)您可以重复使用以在基于UIKit的应用程序中集成任何OpenGL视图。)

答案 2 :(得分:1)

我认为没有必要绘制它们,因为它们可以获得与使用其他软件(photoshop,pixelmator等)完成的图像相同的功能。 为什么?因为(按钮的)内容没有改变,所以没有调整大小,因此图像看起来很漂亮,这里最简单。

如果您想学习如何使用Quartz进行绘制,Apple开发中心和/或Xcode中有很多文档和示例。

这是Matt Gallagher最近的一个教程:Advanced drawing using AppKit