Реализуйте рисование градиентной дуги с помощью CAShapeLayer

Ссылаясь на принятый ответ, найденный здесь Я пытаюсь реализовать это и сталкиваюсь с проблемой с путем к CAShapeLayer. У меня есть следующий код:

-(void)drawGradientArc{
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];

    CAShapeLayer *circleLayer = [CAShapeLayer new];
    circleLayer.lineWidth = 25;
    circleLayer.fillColor = [UIColor clearColor].CGColor;
    circleLayer.strokeColor = [UIColor redColor].CGColor;

    CGFloat radius = 150;


    [bezierPath addArcWithCenter:self.view.center radius:radius startAngle:0 endAngle:M_PI clockwise:YES];


    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.startPoint = CGPointMake(0,0);
    gradientLayer.endPoint = CGPointMake(1,0);


    NSMutableArray *colors = [NSMutableArray array];
    for (int i = 0; i < 10; i++) {
        [colors addObject:(id)[[UIColor colorWithHue:(0.1 * i) saturation:1 brightness:.8 alpha:1] CGColor]];
    }

    gradientLayer.colors = colors;
    [gradientLayer setMask:circleLayer];

    circleLayer.path = bezierPath.CGPath;

    [self.view.layer addSublayer:circleLayer];
}

Это приведет к правильному рисованию дуги полукруга, но путь для градиентов установлен неправильно, и я не смог собрать вместе, как именно настроить код, чтобы он работал с использованием градиента. Есть CGPathCreateCopyByStrokingPath, который, я думаю, мне также может потребоваться вызвать, чтобы правильно установить путь для градиента, но я не совсем уверен, как это сделать. Любая помощь о том, как структурировать код, чтобы заставить эту работу работать, была бы оценена. Я также включил изображение градиента, которое пытаюсь воспроизвести. подход CAShapeLayer и CAGradientLayer был бы идеальным.

введите описание изображения здесь


ios objective-c uiview cagradientlayer cashapelayer
person zic10    schedule 23.12.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Проблема 1: на ваших слоях нет рамок. Добавь это:

gradientLayer.frame = self.view.layer.bounds;
circleLayer.frame = gradientLayer.bounds;

Проблема 2: вы добавляете не тот слой к слою вашего представления. Где у вас есть:

[self.view.layer addSublayer:circleLayer];

скажи вместо этого:

[self.view.layer addSublayer:gradientLayer];

Результат:

введите описание изображения здесь

person matt    schedule 23.12.2015
comment
Это не решит всех ваших проблем, но, по крайней мере, вы увидите что-то значимое на экране, и исправить свой код после этого будет довольно тривиально. - person matt; 23.12.2015
comment
Использование этого при установке фреймов для gradientLayer и shapeLayer работало точно так, как необходимо. Спасибо! - person zic10; 23.12.2015
comment
Ну, это вверх ногами от твоего рисунка. Но это должно быть легко исправить! - person matt; 23.12.2015
comment
Да, это не проблема, мне нужно просто увидеть радужную дугу. Еще раз спасибо! - person zic10; 23.12.2015
comment
Ага, я подумал, что вид радуги сделает тебя намного счастливее. :) - person matt; 23.12.2015
comment
Однако обратите внимание, что если вам действительно нужна радуга, где сами цвета изгибаются полосами вокруг дуги, вы не сможете сделать это таким образом. Вам понадобится радиальный градиент. - person matt; 23.12.2015
comment
Да, на самом деле мне нужно только исчезнуть из двух цветов. Мне просто нужно увидеть, как это работает, используя много цветов, чтобы понять, как это работает. На самом деле, я просто попытаюсь перейти от синего к фиолетовому на одном конце дуги. - person zic10; 23.12.2015