如何在iOS中使用漸變創建疊加顏色

Question

背景信息：我有一個UIImageView。我在下面的方式增加了一個覆蓋彩色自己的形象上：

UIGraphicsBeginImageContext(initialImage.size); 
[initialImage drawInRect:CGRectMake(0, 0, initialImage.size.width, initialImage.size.height) blendMode:kCGBlendModeNormal alpha:alphaValue]; 
UIBezierPath * path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, initialImage.size.width, initialImage.size.height)]; 
[overlayColor setFill]; 
[path fillWithBlendMode:kCGBlendModeMultiply alpha:1]; 
finalImage = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 

[self setImage:finalImage]; 

我還是要添加爲一個疊加的顏色，但是我希望它有一個梯度。我一直在想辦法做到這一點，但並沒有真正取得成功。我想，用漸變添加疊加顏色的方法是錯誤的？我不知道如何做到這一點。我試圖添加一個CGGradientLayer作爲sublayer到UIImageView，但它不起作用。

我想過加入UIView並設置它的backgroundColor爲overlayColor，然後添加一個CGGradientLayer作爲添加爲subview到UIImageView的UIView的sublayer但是，我們不應該添加到subviewsUIImageViews。

有人可以幫助我嗎？也許我應該改變我的方法？

指引我走向正確的方向也將很棒！

我期待着您的回覆和道歉，如果這篇文章還沒有完全清楚！

在此先感謝您的幫助！

編輯：代碼爲CGGradientLayer

CAGradientLayer *gradient = [CAGradientLayer layer]; 
gradient.frame = self.frame; 

UIColor *colorOne = [UIColor colorFromHex:self.feedColor withAlpha:(alphaValue * 0.7)]; 
UIColor *colorTwo = [UIColor colorFromHex:self.feedColor withAlpha:(alphaValue * 1.0)]; 

gradient.colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, (id)colorTwo.CGColor, nil]; 

[self.layer insertSublayer:gradient atIndex:0]; 

Answer 1

如果您正在尋找更具動態性的方法，那麼我將繼承CALayer而不是UIImageView。因此，你需要這樣的事情：

@interface gradientImageLayer : CALayer 

- (instancetype)initWithFrame:(CGRect)frame; 

@end 

@implementation gradientImageLayer 

- (instancetype)initWithFrame:(CGRect)frame { 
    if (self = [super init]) { 

     self.opaque = YES; // Best for performance, but you if you want the layer to have transparency, then remove. 

     UIImage *i = [UIImage imageNamed:@"foo2.png"]; // Replace with your image 

     self.frame = frame; 

     self.contentsScale = [UIScreen mainScreen].nativeScale; 
     self.contents = (__bridge id _Nullable)(i.CGImage); 

     // Your code for the CAGradientLayer was indeed correct. 
     CAGradientLayer *gradient = [CAGradientLayer layer]; 
     gradient.frame = frame; 

     // Add whatever colors you want here. 
     UIColor *colorOne = [UIColor colorWithRed:1 green:1 blue:0 alpha:0.1]; 
     UIColor *colorTwo = [UIColor colorWithRed:0 green:1 blue:1 alpha:0.2]; 

     gradient.colors = @[(id)colorOne.CGColor, (id)colorTwo.CGColor]; // Literals read far nicer than a clunky [NSArray arrayWith.... ] 

     [self addSublayer:gradient];   
    } 

    return self; 
} 

@end 

這種方法的缺點是你無法應用不同的混合模式。我看到在CALayer上應用混合模式的唯一解決方案是通過Core Graphics，但是最好用我的原始答案。

Answer 2

我只想用核芯顯卡才能把你的輸入圖像，漸變疊加適用於它，然後把它傳遞到UIImageView。這樣的事情應該達到所期望的結果：

- (UIImage *)imageWithGradientOverlay:(UIImage *)sourceImage color1:(UIColor *)color1 color2:(UIColor *)color2 gradPointA:(CGPoint)pointA gradPointB:(CGPoint)pointB { 

    CGSize size = sourceImage.size; 

    // Start context 
    UIGraphicsBeginImageContext(size); 
    CGContextRef c = UIGraphicsGetCurrentContext(); 

    // Draw source image into context 
    CGContextDrawImage(c, (CGRect){CGPointZero, size}, sourceImage.CGImage); 

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); 
    CGFloat gradLocs[] = {0, 1}; 
    NSArray *colors = @[(id)color1.CGColor, (id)color2.CGColor]; 

    // Create a simple linear gradient with the colors provided. 
    CGGradientRef grad = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, gradLocs); 
    CGColorSpaceRelease(colorSpace); 

    // Draw gradient with multiply blend mode over the source image 
    CGContextSetBlendMode(c, kCGBlendModeMultiply); 
    CGContextDrawLinearGradient(c, grad, pointA, pointB, 0); 
    CGGradientRelease(grad); 

    // Grab resulting image from context 
    UIImage *resultImg = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    return resultImg; 
} 

這是sourceImage是輸入圖像，color1和color2是您的漸變顏色和gradPointA和gradPointB是您的線性梯度終點（在覈心圖形座標系中，底部左邊是（0,0））。

這樣你就不必亂用圖層。如果你經常用不同的顏色重新繪畫，那麼你可能想要採用使用圖層的方法。