Hiệu ứng hình ảnh với đồ họa lõi

Question

Tôi tự hỏi làm thế nào để tái tạo hiệu ứng hình ảnh mà chúng ta có thể thấy trong một số ứng dụng Mac và iPhone, tất cả chúng bắt đầu từ một ảnh đen trắng: - Trong UiTabbar trên iPhone, cách thức, màu đen và hình ảnh trắng trở thành một gradient màu xanh khi nó được chọn - trong Twitter cho mac, chúng ta có thể thấy một số hiệu ứng (phát sáng, bevel, ....)

Bất kỳ trợ giúp nào về chủ đề này đều được hoan nghênh. :)

EDIT: Tôi quan tâm đến những hiệu ứng này trên MAC OS, chứ không phải trên iPhone.

Answer 1

Thật không may iOS thiếu khung Core Image sẵn có trong MacOSX, đây là nguồn gốc của tất cả những hiệu ứng đẹp mắt đó. Hiệu ứng UITabBar có thể được tái tạo bằng cách sử dụng các tính năng cắt mặt nạ Đồ họa lõi (xem ví dụ

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

). Điều này là có thể bởi vì mặt nạ dựa trên hình ảnh alpha và tất cả các nút thanh tab đều dựa trên alpha (cố gắng thêm vào thanh tab một hình ảnh không dựa trên alpha và bạn sẽ thấy hiệu ứng cuối cùng ...). Cuối cùng, bạn có thể xem ví dụ

GLImageProcessing

trong tài liệu XCode hoặc here: điều này giải thích cách xử lý ảnh cơ bản bằng OpenGL ES 1.1 (bằng cách này ví dụ chứa một số phương pháp kết xuất và kết cấu cơ bản mà bạn có thể sử dụng lại để tích hợp Chế độ xem OpenGL trong ứng dụng dựa trên UIKit của bạn).

Answer 2

Tôi không nghĩ là cần thiết để vẽ chúng vì chúng có thể có được cùng với hình ảnh được thực hiện với phần mềm khác (photoshop, pixelmator, vv). Tại sao? bởi vì nội dung (của nút) không thay đổi, không được thay đổi kích thước nên hình ảnh đẹp và cách dễ nhất ở đây.

Nếu bạn muốn tìm hiểu cách vẽ bằng Quartz, có rất nhiều tài liệu và mẫu trong Apple dev center và/hoặc Xcode.

Đây là một hướng dẫn mới đây của Matt Gallagher: Advanced drawing using AppKit

Answer 3

Kiểm tra dự án QuartzDemo mẫu của Apple. QuartzClipping lớp cho bạn thấy làm thế nào để làm việc với clipping và masking. Dưới đây là những gì tôi đã tìm ra dựa trên dự án đó.

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);