Làm cách nào để tô màu hình ảnh theo chương trình trên iOS?

Tôi muốn tô màu một hình ảnh với tham chiếu màu. Kết quả sẽ giống như chế độ hòa trộn Multiply trong Photoshop, trong đó màu trắng sẽ được thay thế bằng màu :

Tôi sẽ thay đổi giá trị màu liên tục.

Tiếp theo: Tôi sẽ đặt mã để thực hiện việc này trong phương thức drawRect: của ImageView, phải không?

Như mọi khi, một đoạn mã sẽ hỗ trợ rất nhiều cho sự hiểu biết của tôi, trái ngược với một liên kết.

Cập nhật: Phân lớp một UIImageView với mã Ramin đề xuất.

Tôi đặt cái này trong viewDidLoad: của bộ điều khiển chế độ xem của tôi:

[self.lena setImage:[UIImage imageNamed:kImageName]];
[self.lena setOverlayColor:[UIColor blueColor]];
[super viewDidLoad];

Tôi nhìn thấy hình ảnh, nhưng nó không được nhuộm màu. Tôi cũng đã thử tải các hình ảnh khác, đặt hình ảnh trong IB và gọi setNeedsDisplay: trong bộ điều khiển chế độ xem của tôi.

Cập nhật : drawRect: không được gọi.

Cập nhật cuối cùng: Tôi đã tìm thấy một dự án cũ có imageView được thiết lập đúng cách để tôi có thể kiểm tra mã của Ramin và nó hoạt động như một sự quyến rũ!

Cập nhật cuối cùng, cuối cùng:

Đối với những bạn mới học về Đồ họa lõi, đây là điều đơn giản nhất có thể hoạt động.

Trong UIView phân lớp của bạn:

- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColor(context, CGColorGetComponents([UIColor colorWithRed:0.5 green:0.5 blue:0 alpha:1].CGColor)); // don't make color too saturated

    CGContextFillRect(context, rect); // draw base

    [[UIImage imageNamed:@"someImage.png"] drawInRect: rect blendMode:kCGBlendModeOverlay alpha:1.0]; // draw image
}

Đầu tiên, bạn sẽ muốn phân lớp UIImageView và ghi đè phương thức drawRect. Lớp của bạn cần thuộc tính UIColor (chúng ta hãy gọi nó là overlayColor) để giữ màu pha trộn và một bộ thiết lập tùy chỉnh buộc vẽ lại khi màu thay đổi. Một cái gì đó như thế này:

- (void) setOverlayColor:(UIColor *)newColor {
   if (overlayColor)
     [overlayColor release];

   overlayColor = [newColor retain];
   [self setNeedsDisplay]; // fires off drawRect each time color changes
}

Trong phương thức drawRect, trước tiên bạn sẽ muốn vẽ hình ảnh, sau đó phủ lên nó một hình chữ nhật có màu bạn muốn cùng với chế độ hòa trộn thích hợp, giống như sau:

- (void) drawRect:(CGRect)area
{
  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSaveGState(context);

  // Draw picture first
  //
  CGContextDrawImage(context, self.frame, self.image.CGImage);

  // Blend mode could be any of CGBlendMode values. Now draw filled rectangle
  // over top of image.
  //
  CGContextSetBlendMode (context, kCGBlendModeMultiply);
  CGContextSetFillColor(context, CGColorGetComponents(self.overlayColor.CGColor));      
  CGContextFillRect (context, self.bounds);
  CGContextRestoreGState(context);
}

Thông thường để tối ưu hóa bản vẽ, bạn sẽ giới hạn bản vẽ thực tế chỉ ở khu vực được truyền vào drawRect, nhưng vì hình nền phải được vẽ lại mỗi lần thay đổi màu sắc nên có thể toàn bộ sẽ cần được làm mới.

Để sử dụng nó, hãy tạo một phiên bản của đối tượng, sau đó đặt thuộc imagetính (kế thừa từ UIImageView) thành hình ảnh và overlayColorthành giá trị UIColor (các mức hòa trộn có thể được điều chỉnh bằng cách thay đổi giá trị alpha của màu bạn truyền xuống).

Trong iOS7, họ đã giới thiệu thuộc tính tintColor trên UIImageView và renderingMode trên UIImage. Để tô màu UIImage trên iOS7, tất cả những gì bạn phải làm là:

UIImageView* imageView = …
UIImage* originalImage = …
UIImage* imageForRendering = [originalImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
imageView.image = imageForRendering;
imageView.tintColor = [UIColor redColor]; // or any color you want to tint it with

Tôi muốn tô màu một hình ảnh bằng alpha và tôi đã tạo lớp sau. Vui lòng cho tôi biết nếu bạn tìm thấy bất kỳ vấn đề nào với nó.

Tôi đã đặt tên lớp học của tôi CSTintedImageViewvà nó được thừa hưởng từ UIViewtừ UIImageViewkhông gọi drawRect:phương pháp, như đã đề cập trong bài trả lời trước. Tôi đã đặt một bộ khởi tạo được chỉ định tương tự như bộ khởi tạo được tìm thấy trong UIImageViewlớp.

Sử dụng:

CSTintedImageView * imageView = [[CSTintedImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
imageView.tintColor = [UIColor redColor];

CSTintedImageView.h

@interface CSTintedImageView : UIView

@property (strong, nonatomic) UIImage * image;
@property (strong, nonatomic) UIColor * tintColor;

- (id)initWithImage:(UIImage *)image;

@end

CSTintedImageView.m

#import "CSTintedImageView.h"

@implementation CSTintedImageView

@synthesize image=_image;
@synthesize tintColor=_tintColor;

- (id)initWithImage:(UIImage *)image
{
    self = [super initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height)];

    if(self)
    {
        self.image = image;

        //set the view to opaque
        self.opaque = NO;
    }

    return self;
}

- (void)setTintColor:(UIColor *)color
{
    _tintColor = color;

    //update every time the tint color is set
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();    

    //resolve CG/iOS coordinate mismatch
    CGContextScaleCTM(context, 1, -1);
    CGContextTranslateCTM(context, 0, -rect.size.height);

    //set the clipping area to the image
    CGContextClipToMask(context, rect, _image.CGImage);

    //set the fill color
    CGContextSetFillColor(context, CGColorGetComponents(_tintColor.CGColor));
    CGContextFillRect(context, rect);    

    //blend mode overlay
    CGContextSetBlendMode(context, kCGBlendModeOverlay);

    //draw the image
    CGContextDrawImage(context, rect, _image.CGImage);    
}

@end

Chỉ cần làm rõ nhanh (sau một số nghiên cứu về chủ đề này). Tài liệu của Apple ở đây nói rõ rằng:

Các UIImageViewlớp học được tối ưu hóa để vẽ hình ảnh của mình cho màn hình. UIImageViewkhông gọi drawRect:phương thức của các lớp con của nó. Nếu lớp con của bạn cần bao gồm mã vẽ tùy chỉnh, bạn nên phân lớp con UIViewthay thế.

vì vậy, thậm chí không lãng phí bất kỳ thời gian cố gắng ghi đè phương thức đó trong một UIImageViewlớp con. Bắt đầu với UIViewthay vào đó.

Điều này có thể rất hữu ích: PhotoshopFramework là một thư viện mạnh mẽ để thao tác hình ảnh trên Objective-C. Điều này được phát triển để mang lại các chức năng tương tự như người dùng Adobe Photoshop đã quen thuộc. Ví dụ: Đặt màu bằng RGB 0-255, áp dụng trình tập tin pha trộn, chuyển đổi ...

Là mã nguồn mở, đây là liên kết dự án: https://sourceforge.net/projects/photoshopframew/

UIImage * image = mySourceImage;
UIColor * color = [UIColor yellowColor];  
UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height) blendMode:kCGBlendModeNormal alpha:1];
UIBezierPath * path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, image.size.width, image.size.height)];
[color setFill];
[path fillWithBlendMode:kCGBlendModeMultiply alpha:1]; //look up blending modes for your needs
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//use newImage for something

Đây là một cách khác để thực hiện pha màu hình ảnh, đặc biệt nếu bạn đang sử dụng QuartzCore cho một thứ khác. Đây là câu trả lời của tôi cho một câu hỏi tương tự .

Nhập QuartzCore:

#import <QuartzCore/QuartzCore.h>

Tạo CALayer trong suốt và thêm nó làm lớp con cho hình ảnh bạn muốn tô màu:

CALayer *sublayer = [CALayer layer];
[sublayer setBackgroundColor:[UIColor whiteColor].CGColor];
[sublayer setOpacity:0.3];
[sublayer setFrame:toBeTintedImage.frame];
[toBeTintedImage.layer addSublayer:sublayer];

Thêm QuartzCore vào danh sách Framework dự án của bạn (nếu chưa có), nếu không bạn sẽ gặp lỗi trình biên dịch như sau:

Undefined symbols for architecture i386: "_OBJC_CLASS_$_CALayer"

Đối với những người bạn cố gắng phân lớp một lớp UIImageView và gặp khó khăn tại "drawRect: không được gọi", hãy lưu ý rằng bạn nên phân lớp một lớp UIView thay vì đối với các lớp UIImageView, phương thức "drawRect:" không được gọi. Đọc thêm tại đây: drawRect không được gọi trong lớp con UIImageView của tôi

Điều duy nhất tôi có thể nghĩ đến là tạo một chế độ xem hình chữ nhật gần như trong suốt với màu sắc mong muốn và đặt nó trên chế độ xem hình ảnh của bạn bằng cách thêm nó làm chế độ xem phụ. Tôi không chắc liệu điều này có thực sự tô màu cho hình ảnh theo cách bạn tưởng tượng hay không, tôi không chắc làm thế nào bạn có thể xâm nhập vào một hình ảnh và thay thế có chọn lọc một số màu nhất định bằng những màu khác ... nghe có vẻ khá tham vọng đối với tôi.

Ví dụ:

UIImageView *yourPicture = (however you grab the image);
UIView *colorBlock = [[UIView alloc] initWithFrame:yourPicture.frame];
//Replace R G B and A with values from 0 - 1 based on your color and transparency
colorBlock.backgroundColor = [UIColor colorWithRed:R green:G blue:B alpha:A];
[yourPicture addSubView:colorBlock];

Tài liệu cho UIColor:

colorWithRed:green:blue:alpha:

Creates and returns a color object using the specified opacity and RGB component values.

+ (UIColor *)colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha

Parameters

red    - The red component of the color object, specified as a value from 0.0 to 1.0.

green  - The green component of the color object, specified as a value from 0.0 to 1.0.

blue   - The blue component of the color object, specified as a value from 0.0 to 1.0.



alpha  - The opacity value of the color object, specified as a value from 0.0 to 1.0.

Return Value

The color object. The color information represented by this object is in the device RGB colorspace. 

Ngoài ra, bạn có thể muốn xem xét lưu vào bộ nhớ đệm hình ảnh được tổng hợp để thực hiện và chỉ hiển thị nó trong drawRect :, sau đó cập nhật nó nếu cờ bẩn thực sự là bẩn. Mặc dù bạn có thể thay đổi nó thường xuyên, nhưng có thể có trường hợp các bản vẽ đang đến và bạn không bị bẩn, vì vậy bạn có thể chỉ cần làm mới từ bộ nhớ cache. Nếu bộ nhớ là vấn đề nhiều hơn là hiệu suất, bạn có thể bỏ qua điều này :)

Tôi có một thư viện mà tôi có nguồn mở cho cái này: ios-image-filter

Đối với Swift 2.0,

    let image: UIImage! = UIGraphicsGetImageFromCurrentImageContext()

    imgView.image = imgView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)

    imgView.tintColor = UIColor(red: 51/255.0, green: 51/255.0, blue: 

51/255.0, alpha: 1.0)

Tôi đã tạo macro cho mục đích này:

#define removeTint(view) \
if ([((NSNumber *)[view.layer valueForKey:@"__hasTint"]) boolValue]) {\
for (CALayer *layer in [view.layer sublayers]) {\
if ([((NSNumber *)[layer valueForKey:@"__isTintLayer"]) boolValue]) {\
[layer removeFromSuperlayer];\
break;\
}\
}\
}

#define setTint(view, tintColor) \
{\
if ([((NSNumber *)[view.layer valueForKey:@"__hasTint"]) boolValue]) {\
removeTint(view);\
}\
[view.layer setValue:@(YES) forKey:@"__hasTint"];\
CALayer *tintLayer = [CALayer new];\
tintLayer.frame = view.bounds;\
tintLayer.backgroundColor = [tintColor CGColor];\
[tintLayer setValue:@(YES) forKey:@"__isTintLayer"];\
[view.layer addSublayer:tintLayer];\
}

Để sử dụng, bạn chỉ cần gọi:

setTint(yourView, yourUIColor);
//Note: include opacity of tint in your UIColor using the alpha channel (RGBA), e.g. [UIColor colorWithRed:0.5f green:0.0 blue:0.0 alpha:0.25f];

Khi loại bỏ màu chỉ cần gọi:

removeTint(yourView);