iOS. Приемы программирования - Вандад Нахавандипур

/* Получаем актуальный графический контекст. */

CGContextRef currentContext = UIGraphicsGetCurrentContext();

/* Задаем толщину линии. */

CGContextSetLineWidth(currentContext,

5.0f);

/* В этой точке будет начинаться линия. */

CGContextMoveToPoint(currentContext,

50.0f,

10.0f);

/* В этой точке линия будет заканчиваться. */

CGContextAddLineToPoint(currentContext,

100.0f,

200.0f);

/* Для отрисовки линии используем цвет, заданный в контексте в настоящий

момент. */

CGContextStrokePath(currentContext);

}

Запустив этот код в симуляторе iOS, вы получите примерно такие результаты, как на рис. 17.17.

Рис. 17.17. Рисование линии в текущем графическом контексте

Приведу еще один пример. Как было упомянуто ранее, процедура CGContextAddLineToPoint указывает конечную точку данной линии. А что делать, если мы уже провели линию из точки (20; 20) в точку (100; 100), а теперь хотим провести линию из точки (100; 100) в точку (300; 100)? Может возникнуть версия, что, нарисовав первую линию, мы должны переместить перо в точку (100; 100) с помощью процедуры CGContextMoveToPoint, а потом провести линию в точку (300; 100), используя процедуру CGContextAddLineToPoint. Да, это сработает, но задачу можно решить более эффективным способом. После того как вы вызовете процедуру CGContextAddLineToPoint для указания конечной точки отрисовываемой в данный момент линии, положение вашего пера изменится на значение, которое будет передано этому методу. Иными словами, после того, как вы выпустите метод, воспользовавшись пером, метод поставит перо в конечной точке того объекта, который был отрисован (объект может быть любым). Итак, чтобы нарисовать еще одну линию из актуальной конечной точки в новую точку, нужно просто еще раз вызвать процедуру CGContextAddLineToPoint, сообщив ей новую конечную точку. Вот пример:

— (void)drawRect:(CGRect)rect{

/* Задаем цвет, которым мы собираемся отрисовывать линию. */

[[UIColor brownColor] set];

/* Получаем актуальный графический контекст. */

CGContextRef currentContext = UIGraphicsGetCurrentContext();

/* Задаем толщину линий. */

CGContextSetLineWidth(currentContext,

5.0f);

/* В этой точке будет начинаться линия. */

CGContextMoveToPoint(currentContext,

20.0f,

20.0f);

/* В этой точке линия будет заканчиваться. */

CGContextAddLineToPoint(currentContext,

100.0f,

100.0f);

/* Продолжаем линию до новой точки. */

CGContextAddLineToPoint(currentContext,

300.0f,

100.0f);

/* Для отрисовки линии используем цвет, заданный в контексте в настоящий

момент. */

CGContextStrokePath(currentContext);

}

Результат показан на рис. 17.18. Как видите, удалось успешно отрисовать обе линии, не перемещая перо для отрисовки второй линии.

Точка соединения двух линий называется перемычкой (Join). Работая с Core Graphics, можно указывать тип перемычки, которую вы хотите сделать между линиями, сочлененными друг с другом. Для выбора такого типа используется процедура CGContextSetLineJoin. Она принимает два параметра: во-первых, графический контекст, в котором вы задаете перемычку такого типа, а во-вторых, сам тип перемычки, CGLineJoin. CGLineJoin — это перечень следующих значений:

Рис. 17.18. Одновременно отрисовываем две линии

• kCGLineJoinMiter — на месте перемычки образуется острый угол. Этот тип задается по умолчанию;

• kCGLineJoinBevel — угол на месте перемычки линий будет немного спрямлен, как будто обтесан;

• kCGLineJoinRound — как понятно из названия, такая перемычка — скругленная.

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

Рис. 17.19. Три типа перемычек между линиями, существующие в Core Graphics

Для решения этой задачи я написал метод drawRooftopAtTopPointof: textToDisplay: lineJoin:, принимающий три параметра:

• точку, в которой должна располагаться верхушка «крыши»;

• текст, отображаемый под «крышей»;

• используемый тип перемычки.

Код будет таким:

— (void) drawRooftopAtTopPointof:(CGPoint)paramTopPoint

textToDisplay:(NSString *)paramText

lineJoin:(CGLineJoin)paramLineJoin{

/* Задаем цвет, которым собираемся отрисовывать линию. */

[[UIColor brownColor] set];

/* Получаем актуальный графический контекст. */

CGContextRef currentContext = UIGraphicsGetCurrentContext();

/* Задаем перемычку между линиями. */

CGContextSetLineJoin(currentContext,

paramLineJoin);

/* Задаем толщину линий. */

CGContextSetLineWidth(currentContext,

20.0f);

/* В этой точке будет начинаться линия. */

CGContextMoveToPoint(currentContext,

paramTopPoint.x — 140,

paramTopPoint.y + 100);

/* В этой точке линия будет заканчиваться. */

CGContextAddLineToPoint(currentContext,

paramTopPoint.x,

paramTopPoint.y);

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

напоминающая крышу. */

CGContextAddLineToPoint(currentContext,

paramTopPoint.x + 140,

paramTopPoint.y + 100);

/* Для отрисовки линии используем цвет, заданный в контексте в настоящий

момент. */

CGContextStrokePath(currentContext);

/* Рисуем под крышей текст, при этом используется черный цвет. */

[[UIColor blackColor] set];

/* Теперь рисуем текст. */

CGPoint drawingPoint = CGPointMake(paramTopPoint.x — 40.0f,

paramTopPoint.y + 60.0f);

[paramText drawAtPoint: drawingPoint

withFont: [UIFont boldSystemFontOfSize:30.0f]];

}

А теперь вызовем наш метод в методе экземпляра drawRect: объекта-вида, где находится графический контекст:

— (void)drawRect:(CGRect)rect{

[self drawRooftopAtTopPointof: CGPointMake(160.0f, 40.0f)

textToDisplay:@"Miter"

lineJoin: kCGLineJoinMiter];

[self drawRooftopAtTopPointof: CGPointMake(160.0f, 180.0f)

textToDisplay:@"Bevel"

lineJoin: kCGLineJoinBevel];

[self drawRooftopAtTopPointof: CGPointMake(160.0f, 320.0f)

textToDisplay:@"Round"

lineJoin: kCGLineJoinRound];

}

См. также

Разделы 17.3 и 17.7.

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

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

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

Решение

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

Обсуждение

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

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

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

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