iOS. Приемы программирования Нахавандипур Вандад
Обсуждение
В 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];