iphone Drawing gradient inside a polygon - iphone

I want to draw a gradient inside a polygon using core graphics. I am able to draw a hexagon using the code below but i don't know how to fill this hexagon with a gradient color. Any help will be really appreciated.
- (void)drawRect:(CGRect)rect
{
// Drawing code.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextSetLineWidth(context, 2.0);
CGPoint center;
center = CGPointMake(210.0, 90.0);
CGContextMoveToPoint(context, center.x, center.y + 60.0);
for(int i = 1; i < 6; ++i)
{
CGFloat x = 60.0 * sinf(i * 2.0 * M_PI / 6.0);
CGFloat y = 60.0 * cosf(i * 2.0 * M_PI / 6.0);
CGContextAddLineToPoint(context, center.x + x, center.y + y);
}
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
}

Use following code for Gradient fill
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGFloat colors[] =
{
0.62890625, 0.859375, 10.9921875, 1.00,
0.65625, 0.8046875, 0.9453125, 1.00,
};
CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));
CGColorSpaceRelease(rgb);
// now we can actually create the shape and fill it
CGPoint start, end;
CGContextSetRGBFillColor(context, 0, 0, 0.6, 0.1);
CGContextFillEllipseInRect(context, CGRectMake(0.0, 0.0, 100.0, 100.0));
CGContextStrokeEllipseInRect(context, CGRectMake(0.0, 0.0, 100.0, 100.0));
// Gradient
CGRect myrect = CGRectMake(0.0, 0.0, rect.size.width, rect.size.height);
CGContextSaveGState(context);
CGContextClipToRect(context, myrect);
start = CGPointMake(myrect.origin.x, myrect.origin.y + myrect.size.height * 0.25);
end = CGPointMake(myrect.origin.x, myrect.origin.y + myrect.size.height * 1.0);
CGContextDrawLinearGradient(context, gradient, start, end, kCGGradientDrawsBeforeStartLocation);
CGContextRestoreGState(context);

Related

How to draw a full circle with image

I'm pretty new with core graphics. I need to draw a full circle. How do I go about it? I currently have a masked circle.
I referred to this example.
//Use the draw rect to draw the Background, the Circle and the Handle
-(void)drawRect:(CGRect)rect{
[super drawRect:rect];
CGContextRef ctx = UIGraphicsGetCurrentContext();
/** Draw the Background **/
//Create the path
CGContextAddArc(ctx, self.frame.size.width/2, self.frame.size.height/2, radius, 0, M_PI *2, 0);
// CGContextFillEllipseInRect(ctx, CGRectMake(self.frame.size.height/2, self.frame.size.width/2, 100, 100));
// CGContextSetRGBFillColor(ctx, 0.5, 0.5, 0.5, 1.0);
//Set the stroke color to black
[[UIColor greenColor]setStroke];
//Define line width and cap
CGContextSetLineWidth(ctx, TB_BACKGROUND_WIDTH);
CGContextSetLineCap(ctx, kCGLineCapButt);
CGContextDrawPath(ctx, kCGPathStroke);
UIGraphicsBeginImageContext(CGSizeMake(TB_SLIDER_SIZE,TB_SLIDER_SIZE));
CGContextRef imageCtx = UIGraphicsGetCurrentContext();
CGContextAddArc(imageCtx, self.frame.size.width/2 , self.frame.size.height/2, radius, 0, ToRad(self.self.startAngle), 0);
[[UIColor redColor]set];
CGContextSetLineWidth(imageCtx, TB_LINE_WIDTH);
CGContextDrawPath(imageCtx, kCGPathStroke);
//save the context content into the image mask
CGImageRef mask = CGBitmapContextCreateImage(UIGraphicsGetCurrentContext());
UIGraphicsEndImageContext();
CGContextSaveGState(ctx);
CGContextClipToMask(ctx, self.bounds, mask);
CGImageRelease(mask);
//list of components
CGFloat components[8] = {
0.0, 0.0, 1.0, 1.0, // Start color - Blue
1.0, 1.0, 1.0, 1.0 }; // End color - Violet
CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, components, NULL, 2);
CGColorSpaceRelease(baseSpace), baseSpace = NULL;
//Gradient direction
CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
//Draw the gradient
CGContextDrawLinearGradient(ctx, gradient, startPoint, endPoint, 0);
CGGradientRelease(gradient), gradient = NULL;
CGContextRestoreGState(ctx);
/** Draw the handle **/
[self drawTheHandle:ctx];
}
CGContextDrawPath(imageCtx, kCGPathFill);
make the backgroup width and line width to 140 and it works!!
#define TB_BACKGROUND_WIDTH 140 //The width of the dark background
#define TB_LINE_WIDTH 140 //The width of the active area (the gradient) and the width of the handle

How to create Hexagon in iPhone/iPad

I want to make UIView which is originally rectangular to Hexagon shape to be used in my application.
Please help me something on this.
Thanks in advance.
Subclass UView and override drawRect to draw a hexagon like so:
- (void)drawRect:(CGRect)rect
{
float polySize = 60; // change this
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGAffineTransform t0 = CGContextGetCTM(context);
t0 = CGAffineTransformInvert(t0);
CGContextConcatCTM(context, t0);
//Begin drawing setup
CGContextBeginPath(context);
CGContextSetRGBStrokeColor(context, 0, 0, 0, 1);
CGContextSetLineWidth(context, 2.0);
CGPoint center;
//Start drawing polygon
center = CGPointMake(160, 90.0);
CGContextMoveToPoint(context, center.x, center.y + polySize);
for(int i = 1; i < 6; ++i)
{
CGFloat x = polySize * sinf(i * 2.0 * M_PI / 6);
CGFloat y = polySize * cosf(i * 2.0 * M_PI / 6);
CGContextAddLineToPoint(context, center.x + x, center.y + y);
}
//Finish Drawing
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathStroke);
CGContextRestoreGState(context);
}
You can create a subclass of UIView and in it's -(void)drawRect: method draw a hexagon. Or Use UIImageView with image of hexagon

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);
I've played around with it and got this picture:
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.
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.
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!
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);
}

gradient in CGContextAddArc?

I am using following code for Drawing Arc in DrawRect...I want to draw Arc only with gradient effect ...any help please?
CGContextSetAlpha(ctx, 0.5);
CGContextSetRGBFillColor(ctx, color.red, color.green, color.blue, color.alpha );
CGContextMoveToPoint(ctx, cX, cY);
CGContextAddArc(ctx, cX, cY, radious+10, (startDeg-90)*M_PI/180.0, (endDeg-90)*M_PI/180.0, 0);
CGContextClosePath(ctx);
CGContextFillPath(ctx);
First create an arc then use the following code to apply gradient effect to the path,
CGGradientRef glossGradient;
CGColorSpaceRef rgbColorspace;
size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = { 0.965, 0.965, 0.965, 1.0, // Start color
0.603, 0.603, 0.603, 1.0 }; // End color
rgbColorspace = CGColorSpaceCreateDeviceRGB();
glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);
CGRect currentBounds = self.bounds;
CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetMaxY(currentBounds));
CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(), glossGradient, topCenter, midCenter, 0);
CGGradientRelease(glossGradient);
CGColorSpaceRelease(rgbColorspace);

Can draw on only half of UIView

I am trying to draw grid on a UIView on a UIScrollView.
The width of UIView is about 1000 pixels. However, I can draw lines only
about first 340 pixels of the UIView. Can anyone help me on this?
The drawGrid function is
- (void)drawRect:(CGRect)rect
{
NSInteger width = 25 * 5 * 10;
NSInteger height = (10 * 2 + 10) * 12;
NSInteger i;
//Get the CGContext from this view
CGContextRef context = UIGraphicsGetCurrentContext();
// Draw rectangle with a blue stroke color and white fill color
CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextSetLineWidth(context, 2.0);
CGContextAddRect(context, CGRectMake(0.0, 0.0, width, height));
CGContextFillPath(context);
// Draw grid with red color
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
// Set the width of the pen mark
CGContextSetLineWidth(context, 0.2);
for (i = 0; i < height; i += 5)
{
if (i % 25 == 0)
{
CGContextSetLineWidth(context, 0.4);
// Draw a line
CGContextMoveToPoint(context, i, 0.0);
CGContextAddLineToPoint(context, i, width);
CGContextStrokePath(context);
CGContextSetLineWidth(context, 0.2);
}
else
{
// Draw a line
CGContextMoveToPoint(context, i, 0.0);
CGContextAddLineToPoint(context, i, width);
CGContextStrokePath(context);
}
}
for (i = 0; i < width; i += 5)
{
if (i % 25 == 0)
{
CGContextSetLineWidth(context, 0.4);
// Draw a line
CGContextMoveToPoint(context, 0.0, i);
CGContextAddLineToPoint(context, height, i);
CGContextStrokePath(context);
CGContextSetLineWidth(context, 0.2);
}
else
{
// Draw a line
CGContextMoveToPoint(context, 0.0, i);
CGContextAddLineToPoint(context, height, i);
CGContextStrokePath(context);
}
}
}
I am also setting up the UIScrollView and UIView as follows:
- (void)viewDidLoad
{
[super viewDidLoad];
CGRect frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
waveScrollView = [[WaveScrollView alloc] initWithFrame:frame];
CGRect waveframe = CGRectMake(0, 0, 25 * 5 * 10, (10 * 2 + 10) * 12);
EKGWaveView *ekgWaveView = [[EKGWaveView alloc] initWithFrame:waveframe];
waveScrollView.contentSize = CGSizeMake(waveframe.size.width, waveframe.size.height);
waveScrollView.maximumZoomScale = 4.0;
waveScrollView.minimumZoomScale = 0.75;
waveScrollView.clipsToBounds = YES;
waveScrollView.aView = ekgWaveView;
[waveScrollView addSubview:ekgWaveView];
waveScrollView.delegate = self;
[self.view addSubview:waveScrollView];
}
I appreciate any help. Thanks.
I'm pretty sure you've got some of your variables mixed up.
You're looping i from 0 to height but then you're using i as your x parameter when creating lines, and using width as your y parameter.