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];
Related
I'm trying to draw a rectangle that has a 15 degree angle splitting two colors down the center but the line between them is pixelated. I've tried different blend options and can't seem to figure out how to make this look clean.
This is what the header looks like now
Does anyone know how I can make the line between them look clean?
if (!_backgroundImageView.image) {
CGFloat width = CGRectGetWidth(self.bounds);
CGFloat height = CGRectGetHeight(self.bounds);
CGFloat tWidth = 0.26794919243f/*tan(15 degrees)*/ * height;
UIGraphicsBeginImageContext(CGSizeMake(width, height));
CGContextRef context = UIGraphicsGetCurrentContext();
if (_color1) {
CGContextSetFillColorWithColor(context, _color1.CGColor);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 1.0f + RoundPixelValue((width + tWidth) / 2.0f), 0);
CGContextAddLineToPoint(context, 1.0f + RoundPixelValue((width - tWidth) / 2.0f), height);
CGContextAddLineToPoint(context, 0, height);
CGContextFillPath(context);
}
if (_color2) {
CGContextSetFillColorWithColor(context, _color2.CGColor);
CGContextMoveToPoint(context, width, 0);
CGContextAddLineToPoint(context, RoundPixelValue((width + tWidth) / 2.0f) - 1.0f, 0);
CGContextAddLineToPoint(context, RoundPixelValue((width - tWidth) / 2.0f) - 1.0f, height);
CGContextAddLineToPoint(context, width, height);
CGContextFillPath(context);
}
_backgroundImageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
}
The main issue here is that you're not creating the context with the correct scale.
Instead of using UIGraphicsBeginImageContext use UIGraphicsBeginImageContextWithOptions like so:
UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, height), YES, 0);
Specifying a scale of 0 sets it to the scale factor of the device screen.
This should eliminated most of the aliasing artifacts.
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 trying to draw some graphics elements in a UIView inside drawRect method. Code is attached, when I run this code the circle filled with color makes other line disappear.
CGContextRef context = UIGraphicsGetCurrentContext();
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, x, y);
CGRect rectangle = CGRectMake(60+x,100+y,100,80);
CGContextAddEllipseInRect(context, rectangle);
CGContextFillEllipseInRect(context, rectangle);
CGContextStrokePath(context);
CGColorSpaceRelease(colorspace);
CGColorRelease(color);
Please help
Having the same problem. Closer look at documentation on CGContextFillEllipseInRect function has totally disappointed me:
Discussion
As a side effect when you call this function, Quartz clears the
current path
https://developer.apple.com/library/ios/documentation/graphicsimaging/reference/CGContext/Reference/reference.html#//apple_ref/c/func/CGContextFillEllipseInRect
I am using following context in UIView's extended class's drawrect method to draw Paths and Strings.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextScaleCTM(context, 1, -1);
CGContextTranslateCTM(context, 0, -rect.size.height);
To Draw Path I use
CGContextSetRGBStrokeColor(context, 0, 0, 0, 1.0f);
CGContextSetLineWidth(context, 1);
CGContextBeginPath(context);
CGContextMoveToPoint(context, origin.x, origin.y);
CGContextAddLineToPoint(context, currentX, origin.y);
......
CGContextStrokePath(context);
To Draw text I use
CGContextSetLineWidth(context, 2.0);
[self.title drawInRect:CGRectMake(100, 100, 200, 40) withFont:font];
I get paths correctly but Text gets up side down! If I remove CGContextScaleCTM and CGContextTranslateCTM I get path up side down! Can someone help me to resolve this please.
Save your previous context before drawing your path and restore it afterward:
CGContextRef context = UIGraphicsGetCurrentContext();
// save the original context
CGContextSaveGState(context);
CGContextScaleCTM(context, 1, -1);
CGContextTranslateCTM(context, 0, -rect.size.height);
// draw path
// restore the context
CGContextRestoreGState();
// draw text
That should do it.
I end up writting following code. May help someone!
- (void)drawText:(NSString*)text context:(CGContextRef)context rect:(CGRect)rect verticle:(BOOL)verticle {
CGAffineTransform translate = CGAffineTransformMakeTranslation(0, -rect.size.height);
CGAffineTransform transform = translate;
if(verticle) {
CGAffineTransform rotation = CGAffineTransformMakeRotation(M_PI/2);
transform = CGAffineTransformConcat(translate, rotation);
}
CGContextSetTextMatrix(context, transform);
CGContextShowTextAtPoint(context, rect.origin.x, rect.origin.y, [text UTF8String], text.length);
}
i have just a problem with my MKPolyLineView. I simply try to make a color gradient to the Polyline, but with CAGradient it doenst work. I subclasses MKPolylineView and redrawing in
- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
UIColor *darker = [UIColor blackColor];
CGFloat baseWidth = self.lineWidth / zoomScale;
// draw the dark colour thicker
CGContextAddPath(context, self.path);
CGContextSetStrokeColorWithColor(context, darker.CGColor);
CGContextSetLineWidth(context, baseWidth * 1.5);
CGContextSetLineCap(context, self.lineCap);
CGContextStrokePath(context);
// now draw the stroke color with the regular width
CGContextAddPath(context, self.path);
CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor);
CGContextSetLineWidth(context, baseWidth);
CGContextSetLineCap(context, self.lineCap);
CGContextStrokePath(context);
[super drawMapRect:mapRect zoomScale:zoomScale inContext:context];
}
but even that is not working (StrokeColor = red). Any ideas how to get a gradient into
the Polyline? (Highcolor, centercolor, lowcolor)
Thanks everyone.
To paint a MKPolyline with a gradient, you can use a custom subclass of MKPolylineView. As CoreGraphics does not support stroking a path with a gradient, we have to
convert the path to a shape that traces the paths edge using CGPathCreateCopyByStrokingPath
clip the context to that shape
fill using CGContextDrawLinearGradient
Here is a subclass to get you started:
#interface TWOGradientPolylineView : MKPolylineView
#end
#implementation TWOGradientPolylineView
- (void)strokePath:(CGPathRef)path inContext:(CGContextRef)context
{
CGFloat lineWidth = CGContextConvertSizeToUserSpace(context, (CGSize){self.lineWidth, self.lineWidth}).width;
CGPathRef pathToFill = CGPathCreateCopyByStrokingPath(path, NULL, lineWidth, self.lineCap, self.lineJoin, self.miterLimit);
CGRect rect = CGPathGetBoundingBox(pathToFill);
CGContextAddPath(context, pathToFill);
CGPathRelease(pathToFill);
CGContextClip(context);
CGFloat gradientLocations[2] = {0.0f, 1.0f};
CGFloat gradientColors[8] = {1.0f, 0.0f, 0.0f, 0.75f, 1.0f, 1.0f, 0.0f, 0.75f};
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, gradientColors, gradientLocations, 2);
CGColorSpaceRelease(colorSpace);
CGPoint gradientStart = rect.origin;
CGPoint gradientEnd = {CGRectGetMaxX(rect), CGRectGetMaxY(rect)};
CGContextDrawLinearGradient(context, gradient, gradientStart, gradientEnd, kCGGradientDrawsAfterEndLocation);
CGGradientRelease(gradient);
}
#end
Here is a screenshot of a path drawn with the class above: