gotnull
gotnull

Reputation: 27214

iPhone - Help with CGGradientCreateWithColorComponents and creating gradient as per screenshot

I am trying to apply the same gradient as per the screen shot below using CGGradientCreateWithColorComponents.

This is what I'm using at the moment, however it's not quite right and I'm after a better way of trying to guess these values. I'd also like to know how to actually determine what these values are as this code was grabbed from a tutorial, which didn't explain much at all in terms of what the components are.

CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[8] = { 1, 1, 1, 1, 0.866, 0.866, 0.866, 1 };
CGFloat locations[2] = { 0.0, 1.0 };

CGGradientRef myGradient = CGGradientCreateWithColorComponents(myColorspace, components, locations, 2);

enter image description here

Upvotes: 3

Views: 6670

Answers (4)

user712576
user712576

Reputation: 31

Gradient for Badges

-(void) drawRoundedRectWithContext:(CGContextRef)context withRect:(CGRect)rect{
CGFloat radius = CGRectGetMaxY(rect)*self.badgeCornerRoundness;
CGFloat puffer = CGRectGetMaxY(rect)*0.10;

CGFloat maxX = CGRectGetMaxX(rect) - puffer;
CGFloat maxY = CGRectGetMaxY(rect) - puffer;
CGFloat minX = CGRectGetMinX(rect) + puffer;
CGFloat minY = CGRectGetMinY(rect) + puffer;

CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();

 CGFloat locations[3] = { 0.0, 0.5, 1.0 };
 CGFloat colors[] =
 {
 255.0 / 255.0, 200.0 / 255.0, 200.0 / 255.0, 1.00,
 230 / 255.0,  0.0 / 255.0, 0.0 / 255.0, 1.00,
 190 / 255.0,  0.0 / 255.0, 0.0 / 255.0, 1.00,
 };
CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, colors, locations, 3);
CGColorSpaceRelease(rgb);

CGContextBeginPath(context);
CGContextAddArc(context, maxX-radius, minY+radius, radius, M_PI+(M_PI/2), 0, 0);
CGContextAddArc(context, maxX-radius, maxY-radius, radius, 0, M_PI/2, 0);
CGContextAddArc(context, minX+radius, maxY-radius, radius, M_PI/2, M_PI, 0);
CGContextAddArc(context, minX+radius, minY+radius, radius, M_PI, M_PI+M_PI/2, 0);
// Close the path
CGContextClosePath(context);              

CGContextSaveGState(context);
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, CGPointMake(minX,minY), CGPointMake(minX,maxY), kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
CGContextRestoreGState(context);

}

Upvotes: 3

Kseniya
Kseniya

Reputation: 248

I've played around with it and got this picture:

enter image description here

with colors:

static const CGFloat colors [] = { 
0.894, 0.894, 0.894, 1.0, 
0.694, 0.694, 0.694, 1.0
};

using this piece of code:

- (void) drawRect:(CGRect)rect {
   CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
   CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2);
   CGColorSpaceRelease(baseSpace), baseSpace = NULL;

   CGContextRef context = UIGraphicsGetCurrentContext();
   CGContextClearRect(context, rect);
   CGContextSaveGState(context);

   CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
   CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

   CGContextClip(context);
   CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

   CGGradientRelease(gradient), gradient = NULL;

   CGContextRestoreGState(context);
   [super drawRect:rect];
 }

I dont know if it's close enough.

Upvotes: 10

Kseniya
Kseniya

Reputation: 248

0.866 is an RGB as percentage divided by 100. There's a very good standard program on every mac computer located in Applications/Utilities called DigitalColor Meter. Choose RGB as Percentage in the pull down menu. Place you mouse on the color and it shows you the percentage value of red, green and blue. If it gives you R% 76.5 you use 0.765.

Upvotes: 4

curtisk
curtisk

Reputation: 20175

For further reference on CGGradient, check the developer reference

But for a quick overview the components object you have has the RGB + Alpha values for the two colors in the Gradient

Color 1= 1,1,1,1

Color 2= 0.866,0.866,0.866,1

The locations object is basically the default, so nothing special going on there

More info on the constructor you are using that should help you get a handle on the rest of it...Good Luck!

Upvotes: 3

Related Questions