Эффекты изображения с основной графикой - PullRequest
5 голосов
/ 06 февраля 2011

Мне интересно, как воспроизвести эффекты изображения, которые мы можем видеть в нескольких приложениях для Mac и iPhone, причем все они начинаются с черно-белого изображения: - Как в UiTabbar на iPhone черно-белое изображение становится голубым градиентомкогда он выбран - в Twitter для Mac мы видим несколько эффектов (свечение, скос, ....)

Любая помощь по этой теме приветствуется.:) enter image description here

РЕДАКТИРОВАТЬ: меня интересуют эти эффекты на MAC OS, а не на iPhone.

Ответы [ 3 ]

3 голосов
/ 22 февраля 2011

Ознакомьтесь с образцом проекта 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);
2 голосов
/ 06 февраля 2011

К сожалению, в iOS отсутствует платформа Core Image, доступная в MacOSX, которая является источником всех этих прекрасных эффектов.Эффекты UITabBar могут быть воссозданы с использованием функций отсечения маски Core Graphics (см., Например,

void CGContextClipToMask (
   CGContextRef c,
   CGRect rect,
   CGImageRef mask
);
).Это возможно, потому что маскирование основано на альфа-изображении, а все кнопки панели вкладок - на альфа-схеме (попробуйте добавить в панель вкладок изображение, которое не основано на альфа-канале, и вы увидите конечный эффект ...).Наконец, вы можете взглянуть на
GLImageProcessing
пример, содержащийся в документации XCode, или здесь : здесь объясняется, как выполнить некоторую базовую обработку изображений с использованием OpenGL ES 1.1 (кстати, этот пример содержит некоторые базовые методы текстурирования и рендеринга).что вы можете повторно использовать для интеграции любого представления OpenGL в приложение на основе UIKit).
1 голос
/ 06 февраля 2011

Я не считаю необходимым рисовать их, поскольку их можно получить с изображениями, сделанными с помощью другого программного обеспечения (фотошоп, пиксельматор и т. Д.). Зачем? потому что содержимое (кнопки) не изменяется, не изменяется, поэтому изображения выглядят лучше и проще всего здесь.

Если вы хотите научиться рисовать с помощью Quartz, в Apple Dev Center и / или XCode есть много документов и образцов.

Это недавний урок от Мэтта Галлахера: Продвинутый рисунок с использованием AppKit

...