I'm having trouble with drawing a line on the map with a stroke. (inside color and outside color) I beleive i'm on the right path and have subclassed mkOverlayView to override the drawing (needs to fill with the road size) so inside drawMapRect...
CGFloat lineWidth = MKRoadWidthAtZoomScale(zoomScale);
MKMapRect clipRect = MKMapRectInset(mapRect, -lineWidth, -lineWidth);
...
CGContextAddPath(context, path);
CGContextSetStrokeColorWithColor(context, line.color.CGColor);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, lineWidth);
CGContextSetAlpha(context, 0.4f);
CGContextStrokePath(context);
CGPathRelease(path);
I'm not sure how to add the stroke. Any help would be greatly appreciated. xcode 4.6 / ios 6.0+
stroke first a path ( road with) with color 1, then change stroke width and color to a thinner line with road with * 0.6 in color 2, and stroke again.
Ok, I managed to figure it out based on Mathew's suggestion but with a few tweaks...
Essentially I created a stroked path using CGPathCreateCopyByStrokingPath and made the stroke slightly darker than the base color. Then created a transparentLayer with the path and stroke, used the blend mode kCGBlendModeDestinationAtop and drew another path with only a fill this time on top. I'm not sure if this is the best approach but appears to work well.
CGPathRef newpath = CGPathCreateCopyByStrokingPath(path, NULL, lineWidth, kCGLineCapRound, kCGLineJoinMiter, 0.0);
CGContextAddPath(context, newpath);
CGContextSetStrokeColorWithColor(context, line.color.CGColor);
CGContextSetFillColorWithColor(context, line.color.CGColor);
CGContextSetLineWidth(context, lineWidth * 0.3);
CGContextSetAlpha(context, 0.8f);
CGContextBeginTransparencyLayer (context, NULL);
CGContextStrokePath(context);
CGContextBeginPath(context);
CGContextAddPath(context, newpath);
CGContextFillPath(context);
CGContextEndTransparencyLayer(context);
CGContextSetBlendMode(context, kCGBlendModeDestinationAtop);
CGContextSetAlpha(context, 0.3f);
CGContextBeginPath(context);
CGContextAddPath(context, newpath);
CGContextFillPath(context);
CGPathRelease(path);
CGPathRelease(newpath);
EDIT Here is a simpler solution based on AlexWien's approach
if (path != nil)
{
CGPathRef path2 = CGPathCreateCopy(path);
CGFloat hue;
CGFloat saturation;
CGFloat brightness;
CGFloat alpha;
[line.color getHue:&hue saturation:&saturation brightness:&brightness alpha:&alpha];
UIColor *c2 =[UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:0.4];
CGContextAddPath(context, path);
CGContextSetStrokeColorWithColor(context, c2.CGColor);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, lineWidth);
CGContextStrokePath(context);
CGPathRelease(path);
CGContextSetBlendMode(context, kCGBlendModeSourceAtop);
CGContextAddPath(context, path2);
CGContextSetRGBStrokeColor(context, 1.0f, 1.0f, 1.0f, 0.3f);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, lineWidth/2.0f);
CGContextStrokePath(context);
CGPathRelease(path2);
}
Related
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 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 try to modify the Breadcrumb example from Apple in the way that the drawn path has a gradient. I can not make I work. The colour of the path is black and not gradient.
Someone got an idea?
if (path != nil)
{
CGContextAddPath(context, path);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, lineWidth);
CGContextReplacePathWithStrokedPath(context);
path = CGContextCopyPath(context);
CGContextAddPath(context, path);
CGContextSaveGState(context); {
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(rgb, (__bridge CFArrayRef)#[
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor redColor].CGColor
], (CGFloat[]){ 0.0f, 1.0f });
CGColorSpaceRelease(rgb);
CGPoint startPoint = CGPointMake(MKMapRectGetMidX(clipRect), MKMapRectGetMinY(clipRect));
CGPoint endPoint = CGPointMake(MKMapRectGetMidX(clipRect), MKMapRectGetMaxY(clipRect));
CGContextClip(context);
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGGradientRelease(gradient);
} CGContextRestoreGState(context);
CGContextAddPath(context, path);
CGPathRelease(path);
CGContextDrawPath(context, kCGPathFillStroke);
}
How do I draw a blur line with a finger slide/touch motion on the iPhone? I have the following code but it is not worked. It do it wit core-graphics.some sample code?
Thanks!!
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineJoin(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSaveGState(context);
{
CGContextSetShadowWithColor(context, CGSizeMake(-2.0f, 2.0f), 7.0f, BLACK.CGColor);
CGContextBeginPath(context);
CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
CGContextAddPath(context, path);
CGContextStrokePath(context);
}
CGContextRestoreGState(context);
CGPathRelease(path);
Here is the code for simple drawing method. Hope this will help you to implement your code.
How does one draw a crosshairs in an iOS app?
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 0.0, 0.5); // yellow line
CGContextBeginPath(context);
CGContextMoveToPoint(context, 40.0, 40.0); //start point
// Crosshairs go here?!?!?!?
// What do I fill in?
CGContextClosePath(context);
CGContextSetLineWidth(context, 2.0);
CGContextStrokePath(context);
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 0.0);
CGContextFillRect(context, rect);
}
See example image below.
This should help you get started in seeing what you are missing. You are very close. Add an ellipse and you'll be done but as others have suggested, a simple quick look at the Quart2d programming guide or any Quart2d tuts will show all of this and more.
Drawing a circle
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor yellowColor].CGColor);
CGContextSetLineWidth(context, 2.0);
CGContextBeginPath(context);
CGContextMoveToPoint(context, 20, 20);
CGContextAddLineToPoint(context, 40, 20);
CGContextStrokePath(context);
CGContextSetStrokeColorWithColor(context, [UIColor yellowColor].CGColor);
CGContextSetLineWidth(context, 2.0);
CGContextBeginPath(context);
CGContextMoveToPoint(context, 30, 10);
CGContextAddLineToPoint(context, 30, 30);
CGContextStrokePath(context);
}