Dessiner le CAGradient dans MKPolyLineView

Question

J'ai juste un problème avec mon MKPolyLineView. J'essaie simplement de faire un gradient de couleur à la Polyline, mais avec CAGradient cela ne fonctionne pas. J'ai sous-classé MKPolylineView et redessiné en

- (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];
}

mais même cela ne fonctionne pas (StrokeColor = rouge). Une idée sur la façon d'obtenir un gradient dans le dans la polyligne ? (Highcolor, centercolor, lowcolor)

Merci à tous.

Answer 1

Pour peindre un MKPolyline avec un dégradé, vous pouvez utiliser une sous-classe personnalisée de MKPolylineView . Comme CoreGraphics ne prend pas en charge le traçage d'un chemin avec un gradient, nous devons

1. convertir le chemin en une forme qui trace le bord des chemins en utilisant CGPathCreateCopyByStrokingPath
2. clipper le contexte à cette forme
3. remplir en utilisant CGContextDrawLinearGradient

Voici une sous-classe pour vous aider à démarrer :

@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

Voici une capture d'écran d'un chemin dessiné avec la classe ci-dessus :