带颜色渐变的UIBezierPath

我有一个关于UIBezierPath的问题。

例如，我有这个path：

现在我想要从白色到红色的颜色渐变。 从左到右。

这是我的代码：

UIBezierPath *bezierPath; bezierPath = [UIBezierPath bezierPathWithArcCenter:_center radius:_radius startAngle:((4 * angle)) endAngle:(((20) * angle)) clockwise:YES]; [bezierPath addLineToPoint:_center]; [bezierPath closePath]; UIColor *color = [UIColor colorWithHue:0/sectors saturation:1. brightness:1. alpha:1]; [color setFill]; [color setStroke]; [bezierPath fill]; [bezierPath stroke]; 

谁能帮我？

编辑1：

我有这个色轮：

  UIBezierPath *bezierPath; for ( int i = 0; i < 360; i++) { bezierPath = [UIBezierPath bezierPathWithArcCenter:_center radius:_radius startAngle:((i * angle)) endAngle:(((i + 1) * angle)) clockwise:YES]; [bezierPath addLineToPoint:_center]; [bezierPath closePath]; UIColor *color = [UIColor colorWithHue:i/sectors saturation:1. brightness:1. alpha:1]; [color setFill]; [color setStroke]; [bezierPath fill]; [bezierPath stroke]; } 

但是我想要这个:(用白色渐变）

Answer 1

你可以试试看:)

 - (void)drawRect:(CGRect)rect { CGFloat arcStep = (M_PI *2) / 360; // M_PI*2 is equivalent of full cirle BOOL clocklwise = NO; CGFloat x = CGRectGetWidth(rect) / 2; // circle's center CGFloat y = CGRectGetHeight(rect) / 2; // circle's center CGFloat radius = MIN(x, y) / 2; CGContextRef ctx = UIGraphicsGetCurrentContext(); // draw colorful circle CGContextSetLineWidth(ctx, radius*2); for (CGFloat i = 0; i < 360; i+=1) { UIColor* c = [UIColor colorWithHue:i/360 saturation:1. brightness:1. alpha:1]; CGContextSetStrokeColorWithColor(ctx, c.CGColor); CGFloat startAngle = i * arcStep; CGFloat endAngle = startAngle + arcStep + 0.02; CGContextAddArc(ctx, x, y, radius, startAngle, endAngle, clocklwise); CGContextStrokePath(ctx); } // drawing circles then, you might want few of them - smaller radius and less alpha with each step UIColor* c = [[UIColor whiteColor] colorWithAlphaComponent: 0.03]; for (CGFloat fillRadius = radius/2; fillRadius > 0; fillRadius -= 1.f) { CGContextSetLineWidth(ctx, fillRadius*2); CGContextSetStrokeColorWithColor(ctx, c.CGColor); CGContextAddArc(ctx, x, y, fillRadius, 0, M_PI * 2, clocklwise); CGContextStrokePath(ctx); } } 

Answer 2

使用CAGradientLayer并使用CAGradientLayer掩盖它就像这样

 - (void)addCircle{ CAShapeLayer *shapeLayer = [CAShapeLayer new]; shapeLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(CGRectMake(10, 10, 100, 100), 4, 4)].CGPath; shapeLayer.strokeColor = [UIColor redColor].CGColor; shapeLayer.contentsScale = [UIScreen mainScreen].scale; shapeLayer.shouldRasterize = NO; CAGradientLayer *_gradientLayer = [CAGradientLayer layer]; _gradientLayer.frame =self.view.bounds; _gradientLayer.startPoint = CGPointMake(0.0, 1); _gradientLayer.endPoint = CGPointMake(1, 0); _gradientLayer.colors = @[(id)[UIColor blueColor].CGColor,(id)[UIColor redColor].CGColor]; //Add gradient layer to view [self.view.layer addSublayer:_gradientLayer]; _gradientLayer.mask = shapeLayer; } 

以上方法会添加一个三angular形，可能需要更改开始点和结束点。 你也可以改变任何你需要的梯度值。

苹果文件

CAGradientLayer教程

更新更新后，它更清楚，它不是你想要的三angular形，但你需要的可能与CAGradientLayer和CAShapeLayer ，你需要按照相同的方法，你可以添加不同的颜色和位置的渐变（停止）（如果你是添加位置，然后确保位置和颜色相同），然后用CAShapeLayer其遮罩。

Answer 3

你可以试试这个：

  //// General Declarations CGContextRef context = UIGraphicsGetCurrentContext(); //// Shadow Declarations NSShadow* shadow = [[NSShadow alloc] init]; [shadow setShadowColor: UIColor.whiteColor]; [shadow setShadowOffset: CGSizeMake(2.1, -4.1)]; [shadow setShadowBlurRadius: 5]; //// Bezier Drawing UIBezierPath* bezierPath = UIBezierPath.bezierPath; [UIColor.blackColor setStroke]; bezierPath.lineWidth = 1; [bezierPath stroke]; //// Bezier 2 Drawing UIBezierPath* bezier2Path = UIBezierPath.bezierPath; [bezier2Path moveToPoint: CGPointMake(170.5, 59.5)]; [bezier2Path addCurveToPoint: CGPointMake(170.5, 71.5) controlPoint1: CGPointMake(173.5, 65.5) controlPoint2: CGPointMake(170.5, 71.5)]; [bezier2Path addLineToPoint: CGPointMake(155.5, 57.5)]; [bezier2Path addLineToPoint: CGPointMake(170.5, 59.5)]; [UIColor.redColor setFill]; [bezier2Path fill]; ////// Bezier 2 Inner Shadow CGContextSaveGState(context); UIRectClip(bezier2Path.bounds); CGContextSetShadowWithColor(context, CGSizeZero, 0, NULL); CGContextSetAlpha(context, CGColorGetAlpha([shadow.shadowColor CGColor])); CGContextBeginTransparencyLayer(context, NULL); { UIColor* opaqueShadow = [shadow.shadowColor colorWithAlphaComponent: 1]; CGContextSetShadowWithColor(context, shadow.shadowOffset, shadow.shadowBlurRadius, [opaqueShadow CGColor]); CGContextSetBlendMode(context, kCGBlendModeSourceOut); CGContextBeginTransparencyLayer(context, NULL); [opaqueShadow setFill]; [bezier2Path fill]; CGContextEndTransparencyLayer(context); } CGContextEndTransparencyLayer(context); CGContextRestoreGState(context); 

结果将是：

Answer 4

您将通过使用QuartsCore将其归档。 如果你想得到你的graphics图像，你可以调用UIGraphicsBeginImageContext（），如果你想在UIView上绘制，你应该重载UIView的方法 – （void）drawRect：（CGRect）矩形。 您可以添加path到上下文，并将其用于剪辑上下文（不要忘记保存上下文状态之前）。 在你可以绘制渐变之后 。 渐变将被path裁剪。

你会得到这样的东西：

 CGPathRef path = [bezierPath CGPath]; CGContextSaveGState(context); CGContextAddPath(context, path); CGContextClip(context); CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); NSArray *colors = [NSArray arrayWithObjects:(id)[UIColor redColor].CGColor, (id)[UIColor blueColor].CGColor, nil]; CGGradientRef gradient = CGGradientCreateWithColors( colorSpace, (CFArrayRef)colors, NULL); CGColorSpaceRelease(colorSpace); colorSpace = NULL; CGContextDrawLinearGradient(context, gradient, CGPointMake(0.0, 0.0), CGPointMake(100.0, 100.0), kNilOptions); CGContextRestoreGState(context); 

Answer 5

另一个关于Oleg关于饱和度（白色渐变）的回答，我觉得更加令人愉快，Swift（3）。

如果你想要一个更大的白色圆圈（第二个白色步骤为0.2），你可以添加渐变的步骤，

 import UIKit class HSView: UIView { override func draw(_ rect: CGRect) { let arcStep = 2 * CGFloat.pi / 360 let isClockwise = false let x = rect.width / 2 let y = rect.height / 2 let radius = min(x, y) / 2 let ctx = UIGraphicsGetCurrentContext() ctx?.setLineWidth(2 * radius) for i in 0..<360 { let color = UIColor(hue: CGFloat(i)/360, saturation: 1, brightness: 1, alpha: 1) let startAngle = CGFloat(i) * arcStep let endAngle = startAngle + arcStep + 0.02 ctx?.setStrokeColor(color.cgColor) ctx?.addArc(center: CGPoint(x: x, y: y), radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: isClockwise) ctx?.strokePath() } let gradient = CGGradient(colorsSpace: UIColor.white.cgColor.colorSpace, colors: [ UIColor.white.cgColor, UIColor.white.withAlphaComponent(0).cgColor, ] as CFArray, locations: [ 0, 1, ] ) ctx?.drawRadialGradient(gradient!, startCenter: CGPoint(x: x, y: y), startRadius: 0, endCenter: CGPoint(x: x, y: y), endRadius: 2 * radius, options: .drawsAfterEndLocation) } }