24.Drawing - Рисование

Ссылка на видео урок.
В этом уроке рассматриваются функции применяемые для рисования линий, прямоугольников, окружностей, дуг и т.д.
 При рисовании применяются Си`шные  функции.
Получаем контекст для рисования:

CGContextRef context=UIGraphicsGetCurrentContext();

Для задания цвета заливки применяется функция:

    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);

Для задания цвета линий контура фигур или линий:

    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);

Определяем квадрат и добавляем его для отрисовки

    CGRect rect1=CGRectMake(50, 50, 100, 100);

    

    CGContextAddRect(context, rect1);

Для отрисовки контуров этих квадратов выполняем:

    CGContextStrokePath(context);

Для заливки этих квадратов:

    CGContextFillPath(context);

Для добавления к отрисовке  окружности можно использовать функцию:

    CGContextAddEllipseInRect(context, rect1);

Для установки ширины линии:

CGContextSetLineWidth(context, 3);

Для установки округлой формы начала и конца линий (шапки линии):

    CGContextSetLineCap(context, kCGLineCapRound);

Для установки точки с которой начнется рисования линии:

    CGContextMoveToPoint(context, CGRectGetMinX(rect1), CGRectGetMaxY(rect1));

Для рисования линии от установленной точки к следующей (указанной):

   CGContextAddLineToPoint(context, CGRectGetMinX(rect3), CGRectGetMaxY(rect3));

Выводим линии:

   CGContextStrokePath(context);

Добавляем окружность (указывается центр окружности, радиус,  начальный и конечный угол, по часовой стрелке или против):

    

   CGContextAddArc(context, CGRectGetMaxX(rect1), CGRectGetMaxY(rect1), CGRectGetWidth(rect1), 0, M_PI, NO);

Для рисования текста необходимо сформировать атрибуты в NSDictionary:

Определяем текст

    NSString *text=@"test";

Задаем шрифт и размер шрифта

    UIFont *font=[UIFont systemFontOfSize:14.f];

Тень от текста

    NSShadow *shadow=[[NSShadow alloc] init];

Сдвиг тени

    shadow.shadowOffset = CGSizeMake(1, 1);

Цвет тени

    shadow.shadowColor=[UIColor blackColor];

Радиус размытия

    shadow.shadowBlurRadius=0.5;

Записываем все это в словарь дикшионари

    NSDictionary *attributes= [NSDictionary dictionaryWithObjectsAndKeys:

                               [UIColor grayColor],         NSForegroundColorAttributeName,

                               shadow,                      NSShadowAttributeName,

                               font,                        NSFontAttributeName,

                               nil];

    

Определяем размер текста для вывода

    CGSize textSize=[text sizeWithAttributes:attributes];

Определяем место для вывода в центре квадрата

    CGRect textRect = CGRectMake(CGRectGetMidX(rect2), CGRectGetMidY(rect2), textSize.width, textSize.height);

Округляем величины квадрата для отрисовки текста - устраняет эффект размытости возникающий при при дробных значения

    textRect=CGRectIntegral(textRect);

Выводим текст в заданном прямоугольнике с заданными атрибутами

    [text drawInRect:textRect withAttributes:attributes];

Можно выводить текст так же с помощью этой функции указывая точку Origin:

    [text drawAtPoint:CGPointMake(CGRectGetMidX(rect2)-textSize.width/2, CGRectGetMidY(rect2)-textSize.height/2) withAttributes:attributes];

Во второй части урока для примера рисуется шахматная доска:

    CGFloat offset=50;

    CGFloat boarderWidth=4.f;

    CGFloat maxBoardSize=MIN(CGRectGetWidth(rect)-(offset+boarderWidth)*2, CGRectGetHeight(rect)-(offset+boarderWidth)*2);

    int cellSize=(int) maxBoardSize/8;

    int boardSize=cellSize*8;

    CGRect boardRect=CGRectMake((CGRectGetWidth(rect)-boardSize)/2, (CGRectGetHeight(rect)-boardSize)/2, boardSize, boardSize );

    

    

        for (int i=0; i<8; i++) {

        for (int j=0; j<8; j++) {

            if(i%2!=j%2){

                CGRect cellRect=

                CGRectMake(CGRectGetMinX(boardRect)+i*cellSize,

                           CGRectGetMinY(boardRect) +j*cellSize,

                           cellSize,cellSize);

                CGContextAddRect(context, cellRect);

            }

        }

    }

    

    CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor);

    CGContextFillPath(context);

    CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);

    CGContextAddRect(context, boardRect);

    CGContextSetLineWidth(context, boarderWidth);

    CGContextStrokePath(context);

Исходный текст урока 24.

Домашнее задание к уроку 24 UIView Drawing:

Ученик.

1. Нарисуйте пятиконечную звезду :)
2. Добавьте окружности на концах звезды
3. Соедините окружности линиями

Выполнено

Студент.

4. Закрасте звезду любым цветом цветом
5. При каждой перерисовке рисуйте пять таких звезд (только мелких) в рандомных точках экрана

Выполнено

Мастер

6. После того как вы попрактиковались со звездами нарисуйте что-то свое, проявите творчество :)

Выполнено

Ссылка на проект с заданиями ученик, студент, мастер.

Супермен

7. Сделайте простую рисовалку - веду пальцем по экрану и рисую :)

Выполнено

Ссылка на проект