I want to draw a rectangle with the top-left corner rounded with 3 sub-spaces in it. Something like this:
_______
|_|_____|
| |
|_______|
But for some reason I cannot get the inner two lines drawn.
- (void) drawRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();
float cornerRadius = 25.0;
float w = self.bounds.size.width;
float h = self.bounds.size.height;
CGContextMoveToPoint(context, cornerRadius, 0);
CGContextAddQuadCurveToPoint(context, 0, 0, 0, cornerRadius);
CGContextAddLineToPoint(context, 0, h);
CGContextAddLineToPoint(context, w, h);
CGContextAddLineToPoint(context, w, 0);
CGContextAddLineToPoint(context, cornerRadius, 0);
//drawing settings
CGContextSetLineWidth(context, 0.5);
CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor white].CGColor);
//draw rectangle
CGContextDrawPath(context, kCGPathFillStroke);
//draw title/label partition
CGContextMoveToPoint(context, TITLE_HEIGHT, 0);
CGContextAddLineToPoint(context, TITLE_HEIGHT, TITLE_HEIGHT);
CGContextStrokePath(context);
//draw title/content partition
CGContextMoveToPoint(context, 0, TITLE_HEIGHT);
CGContextAddLineToPoint(context, self.bounds.size.width, TITLE_HEIGHT);
CGContextStrokePath(context);
}
I wonder what am I mistaking here... ;(
Thanks in advance
Try to comment out the CGContextSetFillColorWithColor line for a while - maybe the rectangle is overlapping those lines?
Related
Im trying to make a UILabel with the edges looking like the following image.
Here is the drawRect: from my UILabel subclass.
-(void)drawRect:(CGRect)rect{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGRect labelRect = self.bounds;
CGPoint bottomPoint = CGPointMake(labelRect.size.width, rect.size.height);
CGPoint topMinus30Point =CGPointMake(labelRect.size.width-30, 0);
CGPoint topPoint = CGPointMake(labelRect.size.width, 0);
CGContextBeginPath (context);
//from bottom to -30 top
CGContextMoveToPoint(context, bottomPoint.x,bottomPoint.y);
CGContextAddLineToPoint(context, topMinus30Point.x,topMinus30Point.y);
//from -30 to top
CGContextMoveToPoint(context, topMinus30Point.x,topMinus30Point.y);
CGContextAddLineToPoint(context, topPoint.x,topPoint.y);
//from top to bottom
CGContextMoveToPoint(context, topPoint.x,topPoint.y);
CGContextAddLineToPoint(context, bottomPoint.x,bottomPoint.y);
CGContextClosePath(context);
CGContextStrokePath(context);
CGContextRestoreGState(context);
}
How do I crop the created path from the current frame ?
[Im just getting started with Core Graphics, so please be gentle :)]
Any pointers on how to achieve this would be really helpful.
Thanks
Try this:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
// clear drawing rect
CGContextClearRect(context, rect);
// save 1
CGContextSaveGState(context);
CGRect labelRect = self.bounds;
CGPoint bottomPoint = CGPointMake(labelRect.size.width, rect.size.height);
CGPoint topMinus30Point = CGPointMake(labelRect.size.width-30, 0);
CGPoint topPoint = CGPointMake(labelRect.size.width, 0);
CGContextBeginPath(context);
CGContextMoveToPoint(context, 0.0f, 0.0f);
CGContextAddLineToPoint(context, topMinus30Point.x, topMinus30Point.y);
CGContextAddLineToPoint(context, bottomPoint.x, bottomPoint.y);
CGContextAddLineToPoint(context, 0.0f, bottomPoint.y);
CGContextAddLineToPoint(context, 0.0f, 0.0f);
CGContextClosePath(context);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextDrawPath(context, kCGPathFill);
// restore 1
CGContextRestoreGState(context);
}
Put this in the init you use:
[self setBackgroundColor:[UIColor clearColor]];
One approach is,
set the background color of label to clear color, and draw the required shape inside your drawRect method using CGContext.
Your drawRect will become like this
- (void)drawRect:(CGRect)rect{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect labelRect = self.bounds;
CGPoint bottomPoint = CGPointMake(labelRect.size.width, rect.size.height);
CGPoint topMinus30Point =CGPointMake(labelRect.size.width-30, 0);
//from bottom to -30 top
CGContextMoveToPoint(context, self.bounds.origin.x,self.bounds.origin.y);
CGContextAddLineToPoint(context, topMinus30Point.x,topMinus30Point.y);
CGContextAddLineToPoint(context, bottomPoint.x,bottomPoint.y);
CGContextAddLineToPoint(context, self.bounds.origin.x,self.bounds.origin.x + self.bounds.size.height);
CGContextAddLineToPoint(context, self.bounds.origin.x,self.bounds.origin.y);
CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
CGContextFillPath(context);
}
Another approach is using the CGContextClip using this approach your drawRect will become like this
CGContextMoveToPoint(context, self.bounds.origin.x,self.bounds.origin.y);
CGContextAddLineToPoint(context, topMinus30Point.x,topMinus30Point.y);
CGContextAddLineToPoint(context, bottomPoint.x,bottomPoint.y);
CGContextAddLineToPoint(context, self.bounds.origin.x,self.bounds.origin.x + self.bounds.size.height);
CGContextAddLineToPoint(context, self.bounds.origin.x,self.bounds.origin.y);
CGContextClip(context);
CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
CGContextFillRect(context, self.bounds);
Hope this helps
I am trying to draw a semicircle using Core Graphics and Filling it with some color.I want to replace color with image by using CALayer. Can any one help how to do this Thanks!
Code goes here.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, 0, 500);
CGContextAddArc(context, 60, 500, 50, 90, 180, 0);
CGContextStrokePath(context);
You need to specify the angles in radians, not degrees. 180 degrees = π radians. So in your example:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, 10, 500);
CGContextAddArc(context, 60, 500, 50, M_PI / 2, M_PI, 0);
CGContextStrokePath(context);
Note that I also moved the starting point (…MoveToPoint) 10 pixels to the right, because that’s where the arc begins.
The given answers are not working on iOS 7 for me!
I created a little category to create a circle with the angle of a percentage.
Maybe you wanna check it out.You can still adopt the methode if you only want to create a semicircle.
Here is the: GitHub Link
And that is what its look like:
CGPoint circleCenter = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2);
CGContextMoveToPoint(context, circleCenter.x, circleCenter.y);
CGContextAddArc(context, circleCenter.x, circleCenter.y, 50, 90, 180, 0);
CGContextAddLineToPoint(context, circleCenter.x, circleCenter.y);
CGContextSetFillColorWithColor(context, [UIColor colorWithPatternImage:[UIImage imageNamed:#"add-icon.png"]].CGColor);
CGContextFillPath(context);
CGContextAddArc(context, circleCenter.x, circleCenter.y, 50, 180, 90, 0);
CGContextAddLineToPoint(context, circleCenter.x, circleCenter.y);
CGContextSetFillColorWithColor(context, [UIColor colorWithPatternImage:[UIImage imageNamed:#"appIcon_58.png"]].CGColor);
CGContextFillPath(context);
What you need, which I found the other day, is a great tool that lets you visualise Core Graphics code - after drawing it in a graphics program.
Its called Paint Code.
PaintCode
This is the code I have:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
CGContextSetFillColorWithColor(context, [BUTTON_COLOR CGColor]);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextSetLineWidth(context, 1);
int radius = CORNER_RADIUS;
CGContextMoveToPoint(context, 0, self.frame.size.height / 2);
CGContextAddLineToPoint(context, POINT_WIDTH, self.frame.size.height);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius,
rect.origin.y + rect.size.height);
CGContextAddArc(context, rect.origin.x + rect.size.width - radius,
rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius,
radius, 0.0f, -M_PI / 2, 1);
CGContextAddLineToPoint(context, POINT_WIDTH, 0);
CGContextAddLineToPoint(context, 0, self.frame.size.height / 2);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
Why is it not drawing a border around the shape?
EDIT: Now it draws the shape, thanks to changing the last line, but it draws an extra line around it, like this:
http://cl.ly/0u0e051a060m161u0n08
Use CGContextDrawPath(context, kCGPathFillStroke) instead of CGContextFillPath() and CGContextStrokePath().
The thing is, after the first call to CGContextFillPath() or CGContextStrokePath() the context's path is cleared, so the second call does not have a path to work with.
I'm trying to stroke my path by writing below line of code but its not getting drawn. Please help me to find out whats the problem in this.
void draw1PxStroke(CGContextRef context,CGColorRef color,CGMutablePathRef arcPath) {
CGContextSaveGState(context);
CGContextSetLineCap(context, kCGLineCapSquare);
CGContextSetStrokeColorWithColor(context, color);
CGContextSetLineWidth(context, 3.0);
CGContextAddPath(context, arcPath);
CGContextClip(context);
CGContextStrokePath(context);
CGContextRestoreGState(context);
}
The problem is probably your call to CGContextClip which has the side effect of resetting the context's current path to an empty path.
You can do it like this:
CGContextBeginPath(context);
CGContextMoveToPoint(context, rect.origin.x, rect.origin.y);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + rect.size.height);
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height);
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y);
CGContextStrokePath(context);
This will display a square
I want to draw a curved line with arrow between two points using the Quartz Core framework in an iPhone Application. How to do that or any what classes are available to do that ?
You can change the co-ordinates as you want
- (void)drawRect:(CGRect)rect {
//DRAW CURVE
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, 100, 100);
CGContextAddArcToPoint(context, 100,200, 300,200, 100);
CGContextStrokePath(context);
//DRAW LINE
CGContextSetLineWidth(context, 2.0);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0, 0.0, 1.0, 1.0};
CGColorRef color = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(context, color);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 300, 400);
CGContextStrokePath(context);
CGColorSpaceRelease(colorspace);
CGColorRelease(color);
}