Как создать градиентную заливку UIBezierPath?

Я хотел бы создать UIBezierPath с закругленными углами 10px и с градиентной заливкой. Как я могу добиться этого эффекта?

Вот изображение того, что я хочу сделать:

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

Как видите, в этом квадрате есть:

  • 2px черная рамка
  • 10px закругленные углы
  • заливка линейным градиентом от красного к зеленому

Как я могу сделать это программно без использования цвета шаблона изображения?

Вот как я создаю путь:

UIBezierPath *border = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:10.0f];
[border setLineWidth:2];
[[UIColor blackColor] setStroke];
[border stroke];
[[UIColor redColor] setFill]; <-- what should I put here?
[border fill];

iphone uibezierpath core-graphics drawing
person akashivskyy    schedule 12.02.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

3 способа, которые я могу придумать.

  1. Создайте CAGradientLayer и вставьте его как подслой слоя View.layer. Вы даже можете задать закругленный угловой радиус слоя. Конечно, вам придется импортировать фреймворк QuartzCore.

  2. Сделайте это с помощью CoreGraphics, например:

    CGGradientRef gradient;
CGColorSpaceRef colorspace;
size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = { 1.0, 0.0, 0.0, 1.0,  // Start color
        0.0, 1.0, 0.0, 1.0 }; // End color

colorspace = CGColorSpaceCreateDeviceRGB();
gradient = CGGradientCreateWithColorComponents (colorspace, components, locations, num_locations);
CGContextDrawLinearGradient (ctx, gradient, gradientStartPoint, gradientEndPoint, 0);
CGGradientRelease(gradient);

  3. Создайте контекст изображения вне экрана шириной в один пиксель с градиентом, сгенерируйте изображение, затем установите цвет фона с помощью colorWithPatternImage.

Они расположены в порядке от самого простого к самому сложному.

person Vinnie    schedule 12.02.2012
comment
Спасибо! Я буду играть со вторым вариантом. PS: я добавил блок кода к вашему ответу. Помните: если это в списке, вам нужно поставить 8 пробелов перед ним ;) - person akashivskyy; 12.02.2012
comment
Спасибо за редактирование. Я знал, что что-то делаю не так. - person Vinnie; 12.02.2012
comment
И не забудьте добавить путь и клип перед рисованием градиента, чтобы градиент рисовался только внутри этого прямоугольника. CGContextAddPath(ctx, border.CGPath); CGContextClip(ctx); - person Vinnie; 12.02.2012