I have the following code working that draws a white rectangle and clips it the string "TEXT".
CGContextSaveGState(c);
CGContextTranslateCTM(c, 0.0f, rect.size.height);
CGContextScaleCTM(c, 1.0f, -1.0f);
CGContextSelectFont(c, "Helvetica-Bold", 16, kCGEncodingMacRoman);
CGContextSetTextDrawingMode(c, kCGTextClip);
CGContextShowTextAtPoint(c, x, y, "TEXT", strlen("TEXT"));
CGContextClip(c);
CGContextFillRect(c, fillRect);
CGContextRestoreGState(c);
But I want it to clip so that it only draws outside of the text. How do I do that?
Related
This question already has answers here:
How to draw a rounded rectangle in Core Graphics / Quartz 2D?
(9 answers)
Closed 8 years ago.
The code below in my drawRect method draws a rectangle on my view controller. I'd like to set a corner radius to this. What am I missing?
CGRect rectangle = CGRectMake(20, 22, 280, 460);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 255, 255, 255, 1.0);
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextFillRect(context, rectangle);
Try following, please:
CGRect rectangle = CGRectMake(20, 22, 280, 460);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 255, 255, 255, 1.0);
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
//CGContextFillRect(context, rectangle);
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect: rectangle cornerRadius:15.0];
[bezierPath fill];
I am over-riding the drawLayer method to draw a particular page of the pdf. How can I clip a part of the page and show the same.
- (void)drawLayer:(CATiledLayer *)layer inContext:(CGContextRef)context
{
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f); // White
CGContextFillRect(context, CGContextGetClipBoundingBox(context)); // Fill
CGContextTranslateCTM(context, 0.0f, self.bounds.size.height); CGContextScaleCTM(context, 1.0f, -1.0f);
CGContextConcatCTM(context, CGPDFPageGetDrawingTransform(_PDFPageRef, kCGPDFCropBox, self.bounds, 0, true));
CGContextDrawPDFPage(context, _PDFPageRef);
}
You can clip a part of the page if you set a clipping region on the context before drawing the PDF page.
I am drawing a simple filled circle using following code in draw rect.
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(con, CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height));
CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);
CGContextFillPath(con);
it draws a circle properly. Now I want to clip the circle with another small circle in the middle so that it becomes a hollow circle and you can see whatever is behind the main circle. How can i do that?
Use the even-odd rule with CGContextEOClip()
CGSize size = rect.size;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, 0);
CGContextSaveGState(context);
CGContextAddPath(context, ([UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)].CGPath));
CGContextAddPath(context, ([UIBezierPath bezierPathWithOvalInRect:CGRectMake(size.width/4, size.height/4, size.width/2, size.height/2)].CGPath));
CGContextEOClip(context); //clip
CGContextAddPath(context, [UIBezierPath bezierPathWithRect:rect].CGPath);
CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
CGContextFillPath(context);
CGContextRestoreGState(context);
I was able to do that using the EO rule.
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(con, rect);
CGContextAddEllipseInRect(con, CGRectInset(rect, 40, 40));
CGContextSetFillColorWithColor(con, [UIColor blueColor].CGColor);
CGContextEOFillPath(con);
I am using mapkit on iPhone with iOS 4.
I am using a custom overlay and a custom overlay view, to draw shapes on the map.
At the moment, shapes are just rectangles, but I am planning something more sophisticated. This is why I am not using the MKPolygon overlay type.
This is the code for my overlay view drawing method:
-(void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
{
// Clip context to bounding rectangle
MKMapRect boundingMapRect = [[self overlay] boundingMapRect];
CGRect boundingRect = [self rectForMapRect:boundingMapRect];
CGContextAddRect(context, boundingRect);
CGContextClip(context);
// Define shape
CGRect shapeRect = CGRectMake(0.5f, 0.5f, boundingRect.size.width - 1.0f, boundingRect.size.height - 1.0f);
// Fill
CGContextSetRGBFillColor(context, 0.5f, 0.5f, 0.5f, 0.5f);
CGContextFillRect(context, shapeRect);
// Stroke
CGContextSetRGBStrokeColor(context, 0, 0, 0, 0.75f);
CGContextSetLineWidth(context, 1.0f);
CGContextStrokeRect(context, shapeRect);
}
The problem is that rectangles get correctly filled (so it appears their bounding rect is correctly set), but they don't get stroked.
Can anyone help?
Thanks!
As reported in some previous comments, the problem is with line width. More generally, all drawing is automatically scaled to follow the map zooming, so if you want some of your drawing metrics to be zoom-independent, you have to divide it by zoomScale.
Here is the new code, that works correctly on my iPhone 4:
-(void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
{
// Clip context to bounding rectangle
MKMapRect boundingMapRect = [[self overlay] boundingMapRect];
CGRect boundingRect = [self rectForMapRect:boundingMapRect];
CGContextAddRect(context, boundingRect);
CGContextClip(context);
// Define shape
CGRect shapeRect = CGRectInset(boundingRect, 2.0f / zoomScale, 2.0f / zoomScale);
// Fill
CGContextSetRGBFillColor(context, 0.5f, 0.5f, 0.5f, 0.5f);
CGContextFillRect(context, shapeRect);
// Stroke
CGContextSetRGBStrokeColor(context, 0, 0, 0, 0.75f);
CGContextSetLineWidth(context, 4.0f / zoomScale);
CGContextStrokeRect(context, shapeRect);
}
I will also report the code I am using in the overlay to calculate and return the bounding rectangle, because I think it can help:
-(MKMapRect)boundingMapRect
{
// Overlay bounds
CLLocationCoordinate2D topLeftcoordinate = <the top-left coordinate of overlay>;
CLLocationCoordinate2D bottomRightCoordinate = <the bottom-right coordinate of overlay>;
// Convert them to map points
MKMapPoint topLeftPoint = MKMapPointForCoordinate(topLeftcoordinate);
MKMapPoint bottomRightPoint = MKMapPointForCoordinate(bottomRightCoordinate);
// Calculate map rect
return MKMapRectMake(topLeftPoint.x, topLeftPoint.y, bottomRightPoint.x - topLeftPoint.x, topLeftPoint.y - bottomRightPoint.y);
}
Thank you all for your comments and suggestions.
Currently, we should use MKOverlayRenderer instead of MKOverlayView.
In method -(void)drawMapRect:(MKMapRect)mapRect
zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context,
use scaleFactor for configuring the stroke width of lines or other
attributes that might be affected by the scale of the map’s
contents.
Refer to Apple official site drawMapRect:zoomScale:inContext: of MKOverlayRenderer.
I'm using UIPrintPageRenderer sub-class to print html content on a pdf. How can i add a horizontal line on my printed content (both on header and footer)?
CGContextAddLineToPoint doesn't seem to work in UIPrintPageRenderer methods. Specifically those used to draw header and footer. NSString's drawAtPoint is working perfectly.
Here's what i've tried so far:
- (void)drawHeaderForPageAtIndex:(NSInteger)pageIndex inRect:(CGRect)headerRect {
...
// Attempt 1 (Doesn't work!)
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1);
CGContextSetRGBStrokeColor(context, 1.0f, 1.0f, 1.0f, 1);
CGContextMoveToPoint(context, 10.0, 20.0);
CGContextAddLineToPoint(context, 310.0, 20.0);
// Attempt 2 (Doesn't work!)
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1);
CGContextSetRGBStrokeColor(context, 1.0f, 1.0f, 1.0f, 1);
CGContextTranslateCTM(context, 0, headerRect.size.height);
CGContextScaleCTM(context, 1, -1);
CGContextMoveToPoint(context, 10.0, 20.0);
CGContextAddLineToPoint(context, 310.0, 20.0);
}
In Core Graphics, a logical graphics elements are added to the context and then drawn. I see you adding a path to the context with e.g. CGContextAddLineToPoint(context, 310.0, 20.0);
This creates the path in memory, but to composite it to the screen you need to either fill or stroke the context's path. Try adding CGContextStrokePath(context); after to actually stoke the path.
Just as regular drawing
- (void)drawHeaderForPageAtIndex:(NSInteger)pageIndex inRect:(CGRect)headerRect {
CGContextRef context = UIGraphicsGetCurrentContext();
CContextMoveToPoint(context, CGRectGetMinX(headerRect), 70);
CGContextAddLineToPoint(context, CGRectGetMaxX(headerRect), 70);
CGFloat grayScale = 0.5f;
CGContextSetRGBStrokeColor(context, grayScale, grayScale, grayScale, 1);
CGContextStrokePath(context);
}
Don't forget to CGStrokePath(...)
So, for now i've applied an alternate solution. I would still love to know how to do this using CGContext (without having to load an image). Here's my solution:
// Draw horizontal ruler in the header
UIImage *horizontalRule = [UIImage imageNamed:#"HorizontalRule.png"];
horizontalRule = [horizontalRule stretchableImageWithLeftCapWidth:0.5 topCapHeight:0];
CGFloat rulerX = CGRectGetMinX(headerRect) + HEADER_LEFT_TEXT_INSET;
CGFloat rulerY = self.printableRect.origin.y + fontSize.height + HEADER_FOOTER_MARGIN_PADDING + PRINT_RULER_MARGIN_PADDING;
CGFloat rulerWidth = headerRect.size.width - HEADER_LEFT_TEXT_INSET - HEADER_RIGHT_TEXT_INSET;
CGFloat rulerHeight = 1;
CGRect ruleRect = CGRectMake(rulerX, rulerY, rulerWidth, rulerHeight);
[horizontalRule drawInRect:ruleRect blendMode:kCGBlendModeNormal alpha:1.0];