Текст книги "iOS. Приемы программирования"

См. также

Разделы 17.3 и 17.7.

17.7. Создание путей

Постановка задачи

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

Решение

Создавайте и отрисовывайте пути.

Обсуждение

Если расположить рядом серию точек, они могут образовать фигуру. Серия фигур, составленных вместе, образует путь. Управлять путями в Core Graphics очень удобно. В разделе 17.6 мы опосредованно работали с путями, пользуясь функциями CGContext. Но в Core Graphics есть и такие функции, которые работают с путями напрямую. Вскоре мы с ними познакомимся.

Пути относятся к тому графическому контексту, в котором они нарисованы. У путей нет границ либо конкретных контуров, в отличие от фигур, рисуемых по ним. Однако у путей есть ограничивающие рамки. Не забывайте, что граница и ограничивающая рамка – не тождественные понятия. Границы – это пределы, в которых вы можете рисовать на холсте, а ограничивающая рамка пути – это наименьший прямоугольник, в котором содержатся все фигуры, точки и другие объекты, отрисованные по данному конкретному пути. Пути можно сравнить с марками, а графический контекст – с конвертом для письма. Всякий раз, когда вы решите послать открытку другу, конверты для нее будут одинаковыми, но может различаться количество марок, которые вы наклеите на конверт (в нашем случае могут различаться пути).

Когда вы закончите рисование на определенном пути, можно отрисовать этот путь в графическом контексте. Разработчики, которым доводилось заниматься программированием игр, знакомы с понятием буфера. Буфер отрисовывает закрепленные за ним сцены и в нужный момент сбрасывает это содержимое на экран. Пути – это, в сущности, буферы. Они напоминают невидимые границы, рисуемые на холсте.

Приступая к непосредственной работе с путями, начнем с создания самого пути. Метод, создающий путь, возвращает описатель, которым вы будете пользоваться всякий раз, когда решите нарисовать что-либо на этом пути. Описатель передается Core Graphics для справки. Создав путь, вы сможете добавить к нему различные линии, фигуры и точки и только потом отрисовать его. Путь можно либо заполнить определенным цветом заливки, либо отрисовать штрихами в графическом контексте. Вот методы, с которыми придется работать:

• CGPathCreateMutable (функция) – создает новый изменяемый путь типа CGMutablePathRef и возвращает его описатель. Как только мы закончим работу с этим путем, от него необходимо избавиться – об этом мы вскоре поговорим;

• CGPathMoveToPoint (процедура) – перемещает на путь актуальное положение пера. Перо оказывается в точке, заданной в параметре типа CGPoint;

• CGPathAddLineToPoint (процедура) – отрисовывает сегмент линии от актуальной позиции пера до указанной позиции (которая опять же указывается как значение типа CGPoint);

• CGContextAddPath (процедура) – добавляет заданный путь (на который указывает переданный здесь описатель) в графический контекст. Этот путь готов для рисования;

• CGContextDrawPath (процедура) – отрисовывает заданный путь в графическом контексте;

• CGPathRelease (процедура) – высвобождает память, выделенную для описателя пути;

• CGPathAddRect (процедура) – добавляет к пути прямоугольник. Границы прямоугольника указаны в структуре CGRect.

Существуют три важных рисовальных метода, выполнение которых можно задать процедуре CGContextDrawPath:

• kCGPathStroke – рисует линию (штрих), отмечающий границу или кромку пути. Штрих рисуется актуальным цветом, выбранным в данный момент;

• kCGPathFill – заполняет цветом заливки область, вокруг которой описан путь. Заливка выполняется в актуальном цвете, выбранном в данный момент;

• kCGPathFillStroke – комбинирует штрих и заливку. Для заполнения пути использует актуальный цвет заливки, а выбранный цвет штриха применяет для отрисовки пути. В следующем разделе будет рассмотрен пример использования этого метода.

Рассмотрим пример. Допустим, нам необходимо нарисовать голубую линию, идущую по экрану из верхнего левого угла в нижний правый, и другую линию, идущую из верхнего правого угла в левый нижний. Так мы нарисуем на экране большой крест, напоминающий букву «X».

В этом примере я удалил из приложения в симуляторе iOS статусную панель. Если вы не хотите с этим возиться, то можете сразу переходить к коду, приведенному далее. При наличии статусной панели результат выполнения кода будет лишь незначительно отличаться от того, что показано на моем скриншоте. Чтобы скрыть статусную панель, найдите в вашем проекте Xcode файл Info.plist и добавьте в этот файл ключ UIStatusBarHidden со значением YES (рис. 17.20). В таком случае сразу после открытия приложения статусная панель будет скрыта.

Рис. 17.20. Операция с файлом Info.plist, позволяющая скрыть статусную панель приложения iOS

– (void)drawRect:(CGRect)rect{

/* Создаем путь. */

CGMutablePathRef path = CGPathCreateMutable();

/* Каковы размеры экрана? Мы хотим, чтобы X растянулся на весь экран. */

CGRect screenBounds = [[UIScreen mainScreen] bounds];

/* Начинаем с верхнего левого угла. */

CGPathMoveToPoint(path,

NULL,

screenBounds.origin.x,

screenBounds.origin.y);

/* Проводим линию из верхнего левого в нижний правый угол экрана. */

CGPathAddLineToPoint(path,

NULL,

screenBounds.size.width,

screenBounds.size.height);

/* Начинаем другую линию из верхнего правого угла. */

CGPathMoveToPoint(path,

NULL,

screenBounds.size.width,

screenBounds.origin.y);

/* Проводим линию из верхнего правого в нижний левый угол. */

CGPathAddLineToPoint(path,

NULL,

screenBounds.origin.x,

screenBounds.size.height);

/* Получаем контекст, в котором должен быть отрисован путь. */

CGContextRef currentContext = UIGraphicsGetCurrentContext();

/* Добавляем путь к контексту, чтобы позже его можно было отрисовать. */

CGContextAddPath(currentContext,

path);

/* Задаем для штриха голубой цвет. */

[[UIColor blueColor] setStroke];

/* Отрисовываем путь этим цветом. */

CGContextDrawPath(currentContext,

kCGPathStroke);

/* Наконец, высвобождаем объект пути. */

CGPathRelease(path);

}

Параметр NULL, передаваемый таким процедурам, как CGPathMoveToPoint, представляет возможные преобразования, которые могут быть применены при отрисовке фигур и линий по заданному пути. Подробнее о преобразованиях рассказано в разделах 17.11–17.13.

Итак, нарисовать путь в графическом контексте очень просто. На самом деле следует всего лишь запомнить, как создать новый изменяемый путь (CGPathCreateMutable), добавить этот путь к вашему графическому контексту (CGContextAddPath) и отрисовать путь в графическом контексте (CGContextDrawPath). Запустив этот код, вы получите примерно такой результат, как на рис. 17.21.

Рис. 17.21. Рисование в графическом контексте с использованием путей

См. также

Разделы 17.6, 17.11–17.13.

17.8. Отрисовка прямоугольников

Постановка задачи

Требуется отрисовывать прямоугольники в графическом контексте.

Решение

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

Обсуждение

Как мы узнали из раздела 17.7, создавать и использовать пути довольно просто. Одна из процедур, которую Core Graphics позволяет использовать с путями, – CGPathAddRect. Она позволяет отрисовывать прямоугольники как части путей. Вот пример:

– (void)drawRect:(CGRect)rect{

/* Сначала создаем путь. Просто описатель пути. */

CGMutablePathRef path = CGPathCreateMutable();

/* Это границы прямоугольника. */

CGRect rectangle = CGRectMake(10.0f,

10.0f,

200.0f,

300.0f);

/* Добавляем прямоугольник к пути. */

CGPathAddRect(path,

NULL,

rectangle);

/* Получаем описатель текущего контекста. */

CGContextRef currentContext = UIGraphicsGetCurrentContext();

/* Добавляем путь к контексту. */

CGContextAddPath(currentContext,

path);

/* Задаем голубой в качестве цвета заливки. */

[[UIColor colorWithRed:0.20f

green:0.60f

blue:0.80f

alpha:1.0f] setFill];

/* Задаем для обводки коричневый цвет. */

[[UIColor brownColor] setStroke];

/* Задаем для ширины (обводки) значение 5. */

CGContextSetLineWidth(currentContext,

5.0f);

/* Проводим путь в контексте и применяем к нему заливку. */

CGContextDrawPath(currentContext,

kCGPathFillStroke);

/* Избавляемся от пути. */

CGPathRelease(path);

}

Здесь мы рисуем на пути прямоугольник, который впоследствии заполняем голубым цветом, а края прямоугольника отрисовываем коричневым. На рис. 17.22 показано, что мы увидим, запустив эту программу (конечно же, цвета на черно-белой иллюстрации не видны).

Если вы собираетесь отрисовать несколько прямоугольников, то можете передать массив объектов CGRect процедуре CGPathAddRects. Вот пример:

– (void)drawRect:(CGRect)rect{

/* Сначала создаем путь. Просто описатель пути. */

CGMutablePathRef path = CGPathCreateMutable();

/* Это границы первого прямоугольника. */

CGRect rectangle1 = CGRectMake(10.0f,

10.0f,

Рис. 17.22. Отрисовка прямоугольника с помощью путей

200.0f,

300.0f);

/* Это границы второго прямоугольника. */

CGRect rectangle2 = CGRectMake(40.0f,

100.0f,

90.0f,

300.0f);

/* Помещаем оба прямоугольника в массив. */

CGRect rectangles[2] = {

rectangle1, rectangle2

};

/* Добавляем прямоугольники к пути. */

CGPathAddRects(path,

NULL,

(const CGRect *)&rectangles,

2);

/* Получаем описатель текущего контекста. */

CGContextRef currentContext = UIGraphicsGetCurrentContext();

/* Добавляем путь к контексту. */

CGContextAddPath(currentContext,

path);

/* Задаем голубой в качестве цвета заливки. */

[[UIColor colorWithRed:0.20f

green:0.60f

blue:0.80f

alpha:1.0f] setFill];

/* Задаем для обводки черный цвет. */

[[UIColor blackColor] setStroke];

/* Задаем для ширины (обводки) значение. 5 */

CGContextSetLineWidth(currentContext,

5.0f);

/* Проводим путь в контексте и применяем к нему заливку. */

CGContextDrawPath(currentContext,

kCGPathFillStroke);

/* Избавляемся от пути. */

CGPathRelease(path);

}

На рис. 17.23 показано, как результат выполнения этого кода будет выглядеть в симуляторе iOS. Мы передаем процедуре CGPathAddRects следующие параметры (именно в таком порядке).

Рис. 17.23. Одновременная отрисовка нескольких прямоугольников

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

2. Преобразование (при его наличии), которое потребуется применить к прямоугольникам. (Подробнее о преобразованиях рассказано в разделах 17.11–17.13.)

3. Ссылку на массив CGRect, в котором содержатся прямоугольники.

4. Количество прямоугольников в массиве, который мы передали в предыдущем параметре. Исключительно важно передать именно столько прямоугольников, сколько содержится в вашем массиве, чтобы избежать непредвиденного поведения этой процедуры.

См. также

Разделы 17.7, 17.11–17.13.

17.9. Добавление теней к фигурам

Постановка задачи

Требуется применять тени к тем фигурам, которые вы отрисовываете в графическом контексте.

Решение

Воспользуйтесь процедурой CGContextSetShadow.

Обсуждение

В Core Graphics рисовать тени не составляет никакого труда. Графический контекст – это и есть элемент, несущий на себе тень. Это означает, что от вас требуется просто применить тень к контексту, отрисовать для нее необходимые контуры, а потом удалить тень с контекста (или задать новый контекст). Чуть позже мы рассмотрим эти операции на примере.

В Core Graphics для применения тени к графическому контексту могут использоваться две процедуры:

• CGContextSetShadow – создает черные или серые тени, принимает три параметра:

• графический контекст, к которому следует применить тень;

• отступ, указываемый значением типа CGSize, на который тень распространяется вправо и вниз от каждой фигуры. Чем больше значение x данного отступа, тем больше тень будет распространяться вправо. Чем больше значение y, тем ниже будет тень;

• значение размытия, которое следует применить к тени, указывается как число с плавающей точкой (CGFloat). Если задать для данного параметра значение 0.0f, то у тени будут абсолютно четкие контуры. Чем выше это значение, тем более размытой будет становиться тень. Далее будет приведен соответствующий пример;

• CGContextSetShadowWithColor – принимает такие же параметры, как и CGContextSetShadow, плюс еще один. Этот четвертый параметр типа CGColorRef задает цвет тени.

В начале этого подраздела я отмечал, что графический контекст сохраняет свойства расположенных в нем теней, пока мы специально не удалим тень. Хотелось бы дополнительно разъяснить этот момент на примере. Напишем код, позволяющий нам отрисовать два прямоугольника: первый с тенью, второй – без нее. Первый прямоугольник нарисуем так:

– (void) drawRectAtTopOfScreen{

/* Получаем описатель для актуального контекста. */

CGContextRef currentContext = UIGraphicsGetCurrentContext();

CGContextSetShadowWithColor(currentContext,

CGSizeMake(10.0f, 10.0f),

20.0f,

[[UIColor grayColor] CGColor]);

/* Сначала создаем путь. Просто описатель пути. */

CGMutablePathRef path = CGPathCreateMutable();

/* Это границы прямоугольника. */

CGRect firstRect = CGRectMake(55.0f,

60.0f,

150.0f,

150.0f);

/* Добавляем прямоугольник к пути. */

CGPathAddRect(path,

NULL,

firstRect);

/* Добавляем путь к контексту. */

CGContextAddPath(currentContext,

path);

/* Задаем голубой в качестве цвета заливки. */

[[UIColor colorWithRed:0.20f

green:0.60f

blue:0.80f

alpha:1.0f] setFill];

/* Заполняем путь в контексте цветом заливки. */

CGContextDrawPath(currentContext,

kCGPathFill);

/* Избавляемся от пути. */

CGPathRelease(path);

}

– (void) drawRect:(CGRect)rect{

[self drawRectAtTopOfScreen];

}

Если вызвать этот метод в методе экземпляра drawRect: объекта-вида, то на экране появится прямоугольник с красивой тенью, как мы и хотели (рис. 17.24).

Рис. 17.24. Тень, примененная к прямоугольнику

Теперь нарисуем второй прямоугольник. Мы не будем специально запрашивать тень, а оставим свойство тени графического контекста таким же, как и в первом прямоугольнике:

– (void) drawRectAtBottomOfScreen{

/* Получаем описатель текущего контекста. */

CGContextRef currentContext = UIGraphicsGetCurrentContext();

CGMutablePathRef secondPath = CGPathCreateMutable();

CGRect secondRect = CGRectMake(150.0f,

250.0f,

100.0f,

100.0f);

CGPathAddRect(secondPath,

NULL,

secondRect);

CGContextAddPath(currentContext,

secondPath);

[[UIColor purpleColor] setFill];

CGContextDrawPath(currentContext,

kCGPathFill);

CGPathRelease(secondPath);

}

– (void)drawRect:(CGRect)rect{

[self drawRectAtTopOfScreen];

[self drawRectAtBottomOfScreen];

}

Метод drawRect: сначала вызывает метод drawRectAtTopOfScreen, а сразу же после этого – метод drawRectAtBottomOfScreen. Мы не запрашивали создание тени для прямоугольника drawRectAtBottomOfScreen, но после запуска кода вы увидите примерно такой результат, как на рис. 17.25.

Рис. 17.25. Мы не собирались применять тень ко второму прямоугольнику, но она есть

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

В широком смысле прием сохранения и последующего восстановления графического контекста работает не только с тенями. В ходе такой операции восстанавливаются все данные, связанные с графическим контекстом (цвет заливки, шрифт, толщина линий и т. д.), – они возвращаются к установленным ранее значениям. Так, например, если до восстановления графического контекста вы работали с иными цветами заливки и обводки, чем те, что заданы в нем, то эти цвета будут сброшены.

Можно сохранять состояние графического контекста с помощью процедуры CGContextSaveGState и восстанавливать его прежнее состояние, используя процедуру CGContextRestoreGState. Так, если мы изменим процедуру drawRectAtTopOfScreen, сохранив состояние графического контекста до применения тени, а потом восстановим это состояние после того, как отрисуем путь, то результаты у нас получатся иные (рис. 17.26):

– (void) drawRectAtTopOfScreen{

/* Получаем описатель текущего контекста. */

CGContextRef currentContext = UIGraphicsGetCurrentContext();

CGContextSaveGState(currentContext);

CGContextSetShadowWithColor(currentContext,

CGSizeMake(10.0f, 10.0f),

20.0f,

[[UIColor grayColor] CGColor]);

/* Сначала создаем путь. Просто описатель пути. */

CGMutablePathRef path = CGPathCreateMutable();

/* Это границы прямоугольника. */

CGRect firstRect = CGRectMake(55.0f,

60.0f,

150.0f,

150.0f);

/* Добавляем прямоугольник к пути. */

CGPathAddRect(path,

NULL,

firstRect);

/* Добавляем путь к контексту. */

CGContextAddPath(currentContext,

path);

/* Задаем голубой в качестве цвета заливки. */

[[UIColor colorWithRed:0.20f

green:0.60f

blue:0.80f

alpha:1.0f] setFill];

/* Проводим путь в контексте и применяем к нему заливку. */

CGContextDrawPath(currentContext,

kCGPathFill);

/* Избавляемся от пути. */

CGPathRelease(path);

/* Восстанавливаем контекст в исходном состоянии

(в котором мы начали с ним работать). */

CGContextRestoreGState(currentContext);

}

Рис. 17.26. Сохранение состояния графического контекста для точного отображения теней

17.10. Отрисовка градиентов

Постановка задачи

Требуется рисовать в графическом контексте градиенты, используя различные цвета.

Решение

Воспользуйтесь функцией CGGradientCreateWithColor.

Обсуждение

Мы уже поговорили о цвете в разделе 17.3 и теперь попробуем воспользоваться нашими навыками для решения более интересных задач, чем рисование простых прямоугольников и разноцветного текста.

В Core Graphics программист может создавать градиенты двух типов: осевой и радиальный (но мы обсудим только осевые градиенты). Осевой градиент начинается в определенной точке с одного цвета и заканчивается в другой точке иным цветом (конечно, градиент можно и начать и закончить одним и тем же цветом, но тогда он будет не слишком напоминать градиент). «Осевой» означает «относящийся к оси». Между двумя точками (начальной и конечной) создается сегмент линии, он и будет той осью, вдоль которой отрисовывается градиент. Образец осевого градиента показан на рис. 17.27. На самом деле это осевой градиент, начинающийся с голубого цвета и заканчивающийся зеленым, но на черно-белой иллюстрации этого, конечно же, не видно.

Рис. 17.27. Осевой градиент

Чтобы создать осевой градиент, вызовите функцию CGGradientCreateWithColorComponents. Возвращаемым значением этой функции будет новый градиент типа CGGradientRef. Это описатель градиента. Закончив работать с градиентом, необходимо вызвать процедуру CGGradientRelease, передав описатель тому градиенту, который вы ранее получили от CGGradientCreateWithColorComponents.

Функция CGGradientCreateWithColorComponents принимает четыре параметра.

• Цветовое пространство – это контейнер для цветового диапазона, он должен относиться к типу CGColorSpaceRef. Для этого параметра можем просто передать возвращаемое значение функции CGColorSpaceCreateDeviceRGB – и получим пространство цветов RGB.

• Массив цветовых компонентов (подробнее об этом – в разделе 17.3) – здесь должны содержаться значения красного, зеленого, голубого цветов и альфа-значение, все они относятся к типу CGFloat. Количество элементов в массиве тесно связано со значениями следующих двух параметров. Вы должны будете включить в этот массив такое количество значений, которого будет достаточно для того, чтобы указать ряд положений, обозначенных в четвертом параметре. Так, если вы запрашиваете только два положения (начальную и конечную точки), то в этом массиве должно быть минимум два цвета. А поскольку в состав каждого цвета входят красный, зеленый, голубой компоненты, а также альфа-значение, в данном массиве должно быть 2 × 4 элемента: четыре для первого цвета и четыре – для второго. Не волнуйтесь, если пока не все понимаете, – все встанет на свои места после изучения примеров.

• Положения оттенков в цветовом массиве – этот параметр определяет, как быстро в градиенте осуществляется переход от одного оттенка к другому. Количество элементов должно быть таким же, как и значение четвертого параметра. Например, если вы запрашиваете четыре цвета и хотите, чтобы первый цвет был начальным цветом градиента, а последний цвет располагался в конце градиента, то нужно предоставить массив из двух элементов типа CGFloat, где первый элемент имеет значение 0.0f (как в первом компоненте цветового массива), а второй элемент – 3.0f (как в четвертом компоненте цветового массива). Значения двух промежуточных цветов определяют, в каком именно порядке расположены в градиенте оттенки, лежащие между начальным и конечным цветами. Опять же не волнуйтесь, если это сложно сразу усвоить. Я приведу много примеров, на которых вся концепция станет совершенно ясна.

• Количество положений – здесь мы указываем, сколько цветов и положений должно быть в градиенте.

Рассмотрим пример. Предположим, мы хотим нарисовать градиент, который показан на рис. 17.27. Вот как это делается.

1. Выбираем начальную и конечную точки градиента – ось, вдоль которой будут изменяться оттенки. В данном случае я указываю переход слева направо. Представьте, что цвет изменяется по мере движения вдоль гипотетической линии. Цвета будут располагаться по оси так, что любая вертикальная линия, перпендикулярно пересекающая ось градиента, будет пролегать только по одному оттенку. В случае, показанном на рис. 17.27, любая вертикальная линия будет перпендикулярна оси градиента. Рассмотрим эти вертикальные линии подробнее. Действительно, в любой ее точке цвет градиента один и тот же. Вот так и строится градиент. Хорошо, хватит теории – переходим ко второму этапу.

2. Теперь нам нужно создать цветовое пространство, которое будет передано функции CGGradientCreateWithColorComponents в первом параметре, как было объяснено ранее:

CGColorSpaceRef colorSpace =

CGColorSpaceCreateDeviceRGB();

Закончив работу с этим цветовым пространством, мы избавимся от него.

3. Зададим голубой в качестве начального цвета (слева), а зеленый – в качестве конечного (справа), как показано на рис. 17.27. Названия, которыми я пользуюсь (startColorComponents и endColorComponents), выбраны произвольно и помогают нам не забыть о положении каждого цвета. Для указания того, какой цвет будет находиться в начале, а какой – в конце, мы воспользуемся позициями из массива:

UIColor *startColor = [UIColor blueColor];

CGFloat *startColorComponents =

(CGFloat *)CGColorGetComponents([startColor CGColor]);

UIColor *endColor = [UIColor greenColor];

CGFloat *endColorComponents =

(CGFloat *)CGColorGetComponents([endColor CGColor]);

Если вы забыли, какая концепция лежит в основе цветовых компонентов, вернитесь к этому вопросу, изложенному в разделе 17.3, а потом продолжайте читать.

4. Получив компоненты каждого цвета, мы помещаем все их в одномерный массив, который будет передан функции CGGradientCreateWithColorComponents:

CGFloat colorComponents[8] = {

/* Четыре компонента оранжевого цвета (RGBA) */

startColorComponents[0],

startColorComponents[1],

startColorComponents[2],

startColorComponents[3], /* Первый цвет = оранжевый */

/* Четыре компонента голубого цвета (RGBA) */

endColorComponents[0],

endColorComponents[1],

endColorComponents[2],

endColorComponents[3], /* Второй цвет = голубой */

};

5. Поскольку у нас в этом массиве всего два цвета, следует указать, что первый цвет расположен в самом начале градиента (точка с координатами (0; 0)) а второй – в самом конце (точка (1; 0)). Итак, поместим эти показатели в массив, предназначенный для передачи функции CGGradientCreateWithColorComponents:

CGFloat colorIndices[2] = {

0.0f, /* Цвет 0 в массиве colorComponents */

1.0f, /* Цвет 1 в массиве colorComponents */

};

6. Теперь нам остается просто вызвать функцию CGGradientCreateWithColorComponents со всеми сгенерированными значениями:

CGGradientRef gradient =

CGGradientCreateWithColorComponents

(colorSpace,

(const CGFloat *)&colorComponents,

(const CGFloat *)&colorIndices,

2);

7. Прекрасно! Теперь в переменной gradient находится объект градиента. Пока не забыли, нужно высвободить цветовое пространство, созданное с помощью функции CGColorSpaceCreateDeviceRGB:

CGColorSpaceRelease(colorSpace);

Теперь воспользуемся процедурой CGContextDrawLinearGradient для отрисовки осевого градиента в графическом контексте. Эта процедура принимает пять параметров.

• Графический контекст – указывает графический контекст, в котором будет отрисовываться осевой градиент.

• Осевой градиент – описатель объекта осевого градиента. Этот объект градиента создан с помощью функции CGGradientCreateWithColorComponents.

• Начальная точка – точка в графическом контексте, указанная в параметре CGPoint, в которой начинается градиент.

• Конечная точка – точка в графическом контексте, указанная в параметре CGPoint, в которой заканчивается градиент.

• Параметры отрисовки градиента – указывают, что должно произойти, если начальная и конечная точки не совпадают с краями графического контекста. Для заполнения пространства, лежащего вне градиента, можно использовать начальный или конечный цвета. Этот параметр может принимать одно из следующих значений:

• kCGGradientDrawsAfterEndLocation – распространяет градиент на все точки после конечной точки градиента;

• kCGGradientDrawsBeforeStartLocation – распространяет градиент на все точки до начальной точки градиента;

• 0 – градиент не распространяется.

Чтобы распространить градиент в обе стороны, укажите оба параметра – «до» и «после», – воспользовавшись логическим оператором ИЛИ (обозначается символом |). Пример будет рассмотрен далее:

CGRect screenBounds = [[UIScreen mainScreen] bounds];

CGPoint startPoint, endPoint;

startPoint = CGPointMake(0.0f,

screenBounds.size.height / 2.0f);

endPoint = CGPointMake(screenBounds.size.width,

startPoint.y);

CGContextDrawLinearGradient

(currentContext,

gradient,

startPoint,

endPoint,

0);

CGGradientRelease(gradient);

Описатель градиента, который мы высвобождаем в конце этого кода, был создан в другом блоке кода в одном из предыдущих примеров.

Очевидно, что результат выполнения этого кода будет напоминать рис. 17.27. Поскольку мы начали градиент с самой левой точки экрана и распространили его до самой правой, то не можем воспользоваться теми значениями, которые способен получить последний параметр процедуры CGContextDrawLinearGradient, параметр отрисовки градиента. Исправим этот недостаток. Попробуем нарисовать такой градиент, как на рис. 17.28.

Рис. 17.28. Осевой градиент с оттенками, распространяющимися за его начальную и конечную точки

При написании кода воспользуемся той же процедурой, о которой говорили ранее:

– (void)drawRect:(CGRect)rect{

CGContextRef currentContext = UIGraphicsGetCurrentContext();

CGContextSaveGState(currentContext);

CGColorSpaceRef colorSpace =

CGColorSpaceCreateDeviceRGB();

UIColor *startColor = [UIColor orangeColor];

CGFloat *startColorComponents =

(CGFloat *)CGColorGetComponents([startColor CGColor]);

UIColor *endColor = [UIColor blueColor];

CGFloat *endColorComponents =

(CGFloat *)CGColorGetComponents([endColor CGColor]);

CGFloat colorComponents[8] = {

/* Четыре компонента оранжевого цвета (RGBA (RGBA) */

startColorComponents[0],

startColorComponents[1],

startColorComponents[2],

startColorComponents[3], /* Первый цвет = оранжевый */

/* Четыре компонента голубого цвета (RGBA) */

endColorComponents[0],

endColorComponents[1],

endColorComponents[2],

endColorComponents[3], /* Второй цвет = голубой */

};

CGFloat colorIndices[2] = {

0.0f, /* Цвет 0 в массиве colorComponents */

1.0f, /* Цвет 1 в массиве colorComponents */

};

CGGradientRef gradient = CGGradientCreateWithColorComponents

(colorSpace,

(const CGFloat *)&colorComponents,

(const CGFloat *)&colorIndices,

2);

CGColorSpaceRelease(colorSpace);

CGPoint startPoint, endPoint;

startPoint = CGPointMake(120,

260);

endPoint = CGPointMake(200.0f,

220);

CGContextDrawLinearGradient (currentContext,

gradient,

startPoint,

endPoint,

kCGGradientDrawsBeforeStartLocation |

kCGGradientDrawsAfterEndLocation);

CGGradientRelease(gradient);

CGContextRestoreGState(currentContext);

}

Возможно, вам не совсем понятно, как при смешивании значений kCGGradientDrawsBeforeStartLocation и kCGGradientDrawsAfterEndLocation, переданных процедуре CGContextDrawLinearGradient, получается диагональный эффект, как на рис. 17.28. Поэтому уберем эти значения и зададим для этого параметра процедуры CGContextDrawLinearGradient значение 0 – как и раньше. Результат получится как на рис. 17.29.

Рис. 17.29. Осевой градиент без распространения цветов

На рис. 17.28 и 17.29 изображены одинаковые градиенты. Но у градиента на рис. 17.28 цвета начальной и конечной точек распространяются по обе стороны градиента на весь графический контекст, поэтому весь экран оказывается закрашен.