在MKPolyLineView中绘制CAGradient

我只是与我的MKPolyLineView有问题。 我只是尝试为折线创build颜色渐变，但使用CAGradient则可以实现。 我的子类MKPolylineView和重绘

- (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，中心颜色，低颜色）

感谢大家。

Answer 1

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

1. 使用CGPathCreateCopyByStrokingPath将path转换为跟踪path边缘的形状
2. 将上下文剪切成该形状
3. 使用CGContextDrawLinearGradient填充

这是一个让你开始的子类：

 @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 

以下是上述类别绘制的path的截图：