Question

我对UIBezierPath有疑问。

例如，我有这条道路：

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

这是我的代码：

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

使用CAShapeLayer并使用- (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; }屏蔽它

CAGradientLayer

上面的方法会添加一个三角形，可能需要更改起点和终点。您还可以将渐变值更改为您需要的任何值。

Apple Docs

CAGradientLayer Tutorial

更新更新后更清楚地表明它不是您想要的三角形，但您需要CAShapeLayer和CAShapeLayer，您需要遵循相同的方法可以添加不同颜色和位置的渐变（停止）（如果要添加位置，请确保位置和颜色相等），然后使用圆圈{{1}}对其进行遮罩。

Answer 2

你可以尝试一下：）

- (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 3

另一个关于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)
    }
}

Answer 4

你可以试试这个：

    //// 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 5

您将使用QuartsCore对其进行归档。如果你想用图形获取图像，你可以调用UIGraphicsBeginImageContext（），如果你想在UIView上绘制它你应该重载方法 - （void）drawRect：（CGRect）矩形的UIView。您可以添加上下文路径，并将其用于clipping上下文（不要忘记保存上下文状态）。在您绘制gradient之后。渐变将被路径剪切。

你会得到这样的东西：

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);

带颜色渐变的UIBezierPath

5 个答案: