沿着弯曲的UIBezierPath绘制渐变

在应用程序中，我绘制了一个弯曲的UIBezierPath和一个MKOverlayPathView类来显示航线。 这是我正在使用的代码：

- (UIBezierPath *)pathForOverlayForMapRect:(MKMapRect)mapRect { ... bla bla bla ... UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:s]; [path addQuadCurveToPoint:e controlPoint:cp1]; [path addLineToPoint:e2]; [path addQuadCurveToPoint:s2 controlPoint:cp2]; [path closePath]; return path; } 

 - (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context{ self.mapRect = mapRect; CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0); CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 1.0); CGContextSetLineWidth(context, mapRect.size.height/700); CGContextSetLineJoin(context, kCGLineJoinRound); CGContextSetLineCap(context, kCGLineCapRound); CGContextAddPath(context, [self pathForOverlayForMapRect:mapRect].CGPath); [self updateTouchablePathForMapRect:mapRect]; CGContextDrawPath(context, kCGPathFillStroke); } 

这工作得很好，但我想绘制沿该path的渐变，而不是一个填充颜色。 而这正是开始变得非常棘手的地方。

我已经尝试过使用CGContextDrawLinearGradient（），但它还没有让我有用的任何地方。

Answer 1

诀窍是使用行（ CGContextReplacePathWithStrokedPath ）的笔触path和剪辑（ CGContextClip ）来限制梯度path：

 // Create a gradient from white to red CGFloat colors [] = { 1.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 1.0 }; CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB(); CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2); CGColorSpaceRelease(baseSpace), baseSpace = NULL; CGContextSetLineWidth(context, mapRect.size.height/700); CGContextSetLineJoin(context, kCGLineJoinRound); CGContextSetLineCap(context, kCGLineCapRound); CGContextAddPath(context, [self pathForOverlayForMapRect:mapRect].CGPath); CGContextReplacePathWithStrokedPath(context); CGContextClip(context); [self updateTouchablePathForMapRect:mapRect]; // Define the start and end points for the gradient // This determines the direction in which the gradient is drawn CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect)); CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect)); CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0); CGGradientRelease(gradient), gradient = NULL; 

Answer 2

在Swift 3中，这可以使用下面的代码来实现。 这个例子是一条直线，但是同样的原则应该适用。

  let startPoint = CGPoint(x:100, y:100) let endPoint = CGPoint(x: 300, y:400) let context = UIGraphicsGetCurrentContext()! context.setStrokeColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0); // create a line context.move(to: startPoint) context.addLine(to: endPoint) context.setLineWidth(4) // use the line created above as a clipping mask context.replacePathWithStrokedPath() context.clip() // create a gradient let locations: [CGFloat] = [ 0.0, 0.5 ] let colors = [UIColor.green.cgColor, UIColor.white.cgColor] let colorspace = CGColorSpaceCreateDeviceRGB() let gradient = CGGradient(colorsSpace: colorspace, colors: colors as CFArray, locations: locations) let gradientStartPoint = CGPoint(x: rect.midX, y: rect.minY) let gradientEndPoint = CGPoint(x: rect.midX, y: rect.maxY) context.drawLinearGradient(gradient!, start: gradientStartPoint, end: gradientEndPoint, options: .drawsBeforeStartLocation) UIGraphicsEndImageContext()