在 MKPolyLine 视图中绘制渐变

Posted 2023-02-23

【中文标题】在 MKPolyLine 视图中绘制渐变

【英文标题】：Draw CAGradient within MKPolyLineView

【发布时间】：2013-03-13 10:35:36

【问题描述】：

我的 MKPolyLineView 有问题。我只是尝试为折线制作颜色渐变，但使用 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 = red）。任何想法如何获得渐变 折线？ （高色、中心色、低色）

谢谢大家。

【问题讨论】：

您能否发布该项目（或简化版）的完整源代码？

【参考方案1】：

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

使用CGPathCreateCopyByStrokingPath将路径转换为跟踪路径边缘的形状 将上下文剪辑到该形状 使用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

这是使用上面的类绘制的路径的屏幕截图：

【讨论】：

感谢您发布图片，现在我了解您要解决的问题。要使用渐变填充路径，必须将其转换为实际可以填充的形状。这可以通过CGPathCreateCopyByStrokingPath 完成。我会在几个小时后通勤回家，然后更新我的答案。

嗨@r3dsm0k3，我已经用一个在MKPolyline 内绘制渐变的子类更新了我的答案。

感谢@Tammo 的回答，但在ios7 中首选方式是MKPolylineRenderer。

我知道。最初的问题是针对MKPolylineView 提出的，所以我回答了该课程。它在 iOS 7 中也应该可以正常工作。要改用渲染器子类，需要将代码移至-drawMapRect:zoomScale:inContext:，并且需要进行一些额外的工作才能为MKPolyline 获取CGPath。