如何在iOS中使用渐变创建叠加颜色
背景信息:我有一个UIImageView
。我在下面的方式增加了一个覆盖彩色自己的形象上:如何在iOS中使用渐变创建叠加颜色
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
但是,我们不应该添加到subviews
UIImageViews
。
有人可以帮助我吗?也许我应该改变我的方法?
指引我走向正确的方向也将很棒!
我期待着您的回复和道歉,如果这篇文章还没有完全清楚!
在此先感谢您的帮助!
编辑:代码为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];
如果您正在寻找更具动态性的方法,那么我将继承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,但是最好用我的原始答案。
我只想用核芯显卡才能把你的输入图像,渐变叠加适用于它,然后把它传递到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))。
这样你就不必乱用图层。如果你经常用不同的颜色重新绘画,那么你可能想要采用使用图层的方法。
谢谢您的回复。我不断地改变颜色和形象。你会说我使用的CGGradientLayer代码是正确的吗?我应该只使用它而不进行overlayColor处理? – Aashay
它看起来正确,但来自http:// *。com/questions/8630869/add-sublayer-to-a-imageview-layer看起来你不能向“UIImageView”添加子图层。您可能必须将其添加到超级视图的图层。 – Hamish
它也出现在我怀疑,为什么你使用'UIImageView'?为什么不使用'CALayer'并将'contents'属性设置为图像?这样你就可以轻松地覆盖它上面的子图层。 – Hamish
您是否在'UIImageView'图层上方插入了'CGGradientLayer'? – chedabob
是的,我刚刚编辑我的帖子来显示代码。希望这是你问的问题! – Aashay