Четырехугольный градиент в iOS

Я планирую создать градиент с четырьмя точками, изображенный ниже, путем рисования двух линейных градиентов с помощью основной графики и маскировки между ними с помощью третьего черного и белого линейного градиента.

Есть ли более эффективный способ рисовать градиент с четырьмя точками с использованием основной графики или другого?

enter image description here

Ответ 1

Вы можете сохранить градиент маски при использовании CGBlendMode. Сложнее контролировать точные цвета. Но если это не важно для вас, это может быть немного более эффективным с точки зрения строк кода и, возможно, также с точки зрения производительности.

Здесь пример с некоторыми случайными цветами и CGBlendModeExclusion (CGBlendModeDifference дает вам аналогичный эффект)

- (void) drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetBlendMode(ctx, kCGBlendModeExclusion);
    CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();

    CGFloat col1[8] = {
        1.0, 0.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0
    };
    CGGradientRef grad1 = CGGradientCreateWithColorComponents (space, col1, NULL, 2);
    CGContextDrawLinearGradient(ctx, grad1, CGPointMake(0, 0), CGPointMake(0, 320), 0);


    CGFloat col2[8] = {
        1.0, 0.5, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0
    };
    CGGradientRef grad2 = CGGradientCreateWithColorComponents (space, col2, NULL, 2);
    CGContextDrawLinearGradient(ctx, grad2, CGPointMake(0, 0), CGPointMake(320, 0), 0);

    CGGradientRelease(grad1);
    CGGradientRelease(grad2);
    CGColorSpaceRelease(space);
}

Ответ 2

Нарисуйте четыре круга:

Circles

Применить радиальный прозрачный градиент:

Gradient

Результат:

Result

Примечания:

  • Серая линия представляет размер растрового изображения.
  • Диаметр окружности в два раза больше диаметра растрового изображения.
  • Каждый круг центрируется в одном из растрового угла.
  • Эффективно выполняется только центральная часть.
  • Остальные части находятся за пределами растрового изображения.