Làm thế nào để vẽ một hình trên một UIImage đồng thời tôn trọng alpha của hình ảnh mặt nạ

Question

Tôi cần một UIImageView có thể vẽ bản thân trong màu hoặc b/w theo một lá cờ:

BOOL isGrey; 

Tôi đang cố gắng để làm điều đó bằng cách vẽ một hình chữ nhật màu đen trên đầu trang của hình ảnh ban đầu với Quartz blendmode thiết lập để màu. Điều này làm việc ngoại trừ nó không tôn trọng mặt nạ alpha của hình ảnh.

Xem hình minh họa: alt text http://img214.imageshack.us/img214/1407/converttogreyscaleillo.png

tìm kiếm Google và SO, tôi thấy và thử nhiều giải pháp nhưng không ai tôn trọng các mặt nạ một trong hai.

Dưới đây là đoạn code mà tạo ra 'Những gì tôi có được' hình trên:

- (void)drawRect:(CGRect)rect { 

    if (isGrey) { 
     CGContextRef context = UIGraphicsGetCurrentContext(); 

     // flip orientation 
     CGContextTranslateCTM(context, 0, self.bounds.size.height); 
     CGContextScaleCTM(context, 1.0, -1.0); 

     // draw the image 
     CGContextDrawImage(context, self.bounds, self.image.CGImage); 

     // set the blend mode and draw rectangle on top of image 
     CGContextSetBlendMode(context, kCGBlendModeSaturation); 
     CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 1.0); 
     CGContextFillRect(context, rect);  
    } else { 
     [self.image drawInRect:rect]; 
    } 
} 

Có một số bản vẽ chế độ thạch anh mà tôi quên để thiết lập? Tôi đã xem qua hướng dẫn lập trình thạch anh nhưng rất khó để trích xuất một chút thông tin bạn cần từ các đối tượng chồng chéo và siêu liên kết.

Rõ ràng là tôi đang tìm một giải pháp chung sẽ áp dụng cho hình ảnh với bất kỳ hình dạng mặt nạ nào, không chỉ vòng tròn được hiển thị.

Answer 1

Để vẽ một hình dạng trong khi tôn trọng mặt nạ alpha của hình ảnh, chỉ cần thêm một dòng trước khi bạn vẽ:

CGContextClipToMask(context, self.bounds, image.CGImage); 

// example usage 
    - (void)drawRect:(CGRect)rect { 

    if (isGrey) { 
      CGContextRef context = UIGraphicsGetCurrentContext(); 

      // flip orientation 
      CGContextTranslateCTM(context, 0.0, self.bounds.size.height); 
      CGContextScaleCTM(context, 1.0, -1.0); 

      // draw the image 
      CGContextDrawImage(context, self.bounds, self.image.CGImage); 

      // set the blend mode and draw rectangle on top of image 
      CGContextSetBlendMode(context, kCGBlendModeColor); 
      CGContextClipToMask(context, self.bounds, image.CGImage); // respect alpha mask 
      CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 1.0); 
      CGContextFillRect(context, rect);    
    } else { 
      [self.image drawInRect:rect]; 
    } 

}

Answer 2

Mặc dù nó không trực tiếp trả lời câu hỏi của bạn, bạn có thể để có được hiệu ứng bạn đang tìm kiếm bằng cách sử dụng chế độ pha trộn kCGBlendModeLuminosity:

- (void)drawRect:(CGRect)rect { 
    CGSize imageSize = [image size]; 
    CGContextRef c = UIGraphicsGetCurrentContext(); 
    if (isGrey) 
     CGContextSetBlendMode(c, kCGBlendModeLuminosity); 
    CGContextScaleCTM(c, 1.0, -1.0); 
    CGContextDrawImage(c, CGRectMake(0.0f, 0.0f, imageSize.width, -imageSize.height), [image CGImage]); 
} 

_{Ngoài ra, rect truyền cho drawRect: được vùng không hợp lệ, không phải toàn bộ khu vực. Bạn nên sử dụng số bounds thay vì}

Answer 3

Bạn có thể thử thêm mặt nạ vào lớp Hình ảnh động của chế độ xem.

CALayer *maskLayer = [CALayer layer]; 
[maskLayer setBounds:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f)]; 

// Center the layer 
[maskLayer setPosition:CGPointMake([self view].bounds.size.width/2, 
          [self view].bounds.size.height/2)]; 

// Set the cornerRadius to half the width/height to get a circle. 
[maskLayer setCornerRadius:50.f]; 
[maskLayer setMasksToBounds:YES]; 

// Any solid color will do. Just using black here. 
[maskLayer setBackgroundColor:[[UIColor blackColor] CGColor]]; 

// Set the mask which will only allow that which is in the 
// circle show through 
[[[self view] layer] setMask:maskLayer]; 

Một suy nghĩ khác. Tại sao bạn không thể tạo một phiên bản b & w của hình ảnh và hoán đổi tùy theo cờ của bạn?

Answer 4

Tôi muốn lấy một cách dễ dàng và vẽ một vòng tròn màu đen có cùng kích thước với hình ảnh tròn mà bạn có. Có lẽ không phải những gì bạn đang yêu cầu.