如何在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））。

这样你就不必乱用图层。如果你经常用不同的颜色重新绘画，那么你可能想要采用使用图层的方法。