Clever Geek Handbook

Custom Map Route Line

I am having trouble drawing a line on a map with a stroke. (inside color and outside color) I believe I am on the right track and subclassed mkOverlayView to override the drawing (need to fill in the size of the road), 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 punch. Any help would be greatly appreciated. xcode 4.6 / ios 6.0 +

enter image description here

+3


source to share


2 answers


first draw a path (road c) with color 1, then change the width and color of the traverse to a thinner line with road c * 0.6 in color 2 and do the stroke again.



+2


source


Ok, I was able to figure it out based on Matthew's suggestion, but with some tricks ...

enter image description here

Essentially, I created a step path with CGPathCreateCopyByStrokingPath

and made the move slightly darker than the base color. Then create transparentLayer

with path and stroke, use blend mode kCGBlendModeDestinationAtop

and draw a different path, only this time on top. I'm not sure if this is the best approach, but it seems 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 . This is a simpler solution based on AlexWien's approach enter image description here

    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);

    }
+2


source






More articles:


All Articles