在MKPolyLineView中绘制CAGradient [英] Draw CAGradient within MKPolyLineView

问题描述

我的MKPolyLineView只有一个问题。我只是尝试为Polyline创建一个颜色渐变，但是使用CAGradient它会起作用。我子类化MKPolylineView并重新绘制

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

但即使这样也行不通（StrokeColor =红色）。任何想法如何在Polyline中获得
的渐变？ （Highcolor，centercolor，lowcolor）

but even that is not working (StrokeColor = red). Any ideas how to get a gradient into the Polyline? (Highcolor, centercolor, lowcolor)

谢谢大家。

推荐答案

要使用渐变绘制 MKPolyline ，可以使用 MKPolylineView 的自定义子类。由于CoreGraphics不支持使用渐变来描边，我们必须

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

1. 将路径转换为使用<跟踪路径边缘的形状code> CGPathCreateCopyByStrokingPath


2. 将上下文剪辑为该形状


3. 使用 CGContextDrawLinearGradient填充

1. convert the path to a shape that traces the paths edge using CGPathCreateCopyByStrokingPath
2. clip the context to that shape
3. 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:

这篇关于在MKPolyLineView中绘制CAGradient的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！