Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. iOS SDK
Code

Введение в Quartz 2D

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Alex Grigorovich (you can also view the original English article)

Что такое Quartz 2D?

Quartz 2D - это 2D-движок Apple, важный компонент фреймворка Core Graphics.  Вы могли часто встречать Quartz 2D, в составе Core Graphics, или сокращённо CG.

Quartz 2D использует "модель художника". В модели художника каждая последующая операция рисования накладывает слой «краски» на исходный «холст», который часто называют страницей. Представьте, как будто художник работает над картиной.  Если художник должен закрасить весь холст синим, а затем нарисовать облака на холсте, тогда облака будут перекрывать синий слой под ними.  Когда что-то "нарисовано" на холсте, его нельзя изменить, но можно добавить краску на него.

Все рисунки в Quartz 2D выполняются через графический контекст типа CGContextRef. Со ссылкой на графический контекст вы можете использовать 2D-функции Quartz для рисования, выполнять операции, такие как перевод контекста и изменение параметров графического состояния, таких как ширина линии и цвет заливки.  Quartz 2D - это API на основе языка программирования C, поэтому вы будете выполнять функции C, передаваемые в качестве параметра.

Чтобы рисовать на экране iOS, вы должны создать подкласс для UIView и переопределить его метод drawRect(_:).  Внутри метода thisdrawRect(_:) вы можете создать любой пользовательский рисунок.  Никогда не вызывайте метод drawRect(_:) напрямую в вашем коде.  Если вам нужно обновить экран и выполнить команды рисования, вы должны вызвать методы setNeedsDisplay() или setNeedsDisplayInRect(_ :).

При использовании Quartz 2D на iOS координата (0,0) находится в верхнем левом углу экрана. Координата x увеличивается, когда вы двигаетесь вправо, и координата y увеличивается при движении вниз.

В этом уроке вы можете обратиться к руководству 2D-программирования Quartz. Цель этого руководства - начать работу с Quartz 2D. Существует множество моментов, о которых мы не сможет рассказать, и чтобы полностью изучить все возможности Quartz 2D, я предлагаю вам прочитать руководство по программированию.

После этого краткого отступления, давайте начнем изучение Quartz 2D.

1. Подготовка UIView для рисования

Предполагая, что вы уже создали проект и готовы начать работу с Quartz 2D, шаги, которые вам нужно предпринять, довольно просты.  Вам нужно будет создать класс, который является подклассом UIView, добавить в ваш проект представление из библиотеки с помощью интерфейса конструктора и установить класс представления на созданный вами подкласс UIView.  Давайте выполним это шаг за шагом.

Шаг 1. Подкласс UIView

Перейдите в меню File > New > File....  В разделе iOS выберите Source, а затем выберите Cocoa Touch Class в качестве шаблона.

New Cocoa Touch Class

На следующем экране назовите ваш класс, убедитесь, что это подкласс UIView, и установите язык программирования на Swift. Нажмите Next и выберите место, где сохранить новый класс.

Set File Options

Если вы просмотрите исходный код созданного класса, вы увидите метод drawRect(_:).  В настоящее время он закомментирован, но мы изменим это через несколько минут.

Шаг 2: Добавление представления и настройка класса

Откройте storyboard проекта, затем откройте Object Library справа.  В поле поиска внизу введите "UIView" чтобы отфильтровать объектов, которые нам не нужны.

Show Object Library

Перетащите экземпляр UIView на контроллер представления.  Выбрав представление откройте Identity Inspector справа и измените название класса, на то, которое мы использовали для подкласса.

Set Class on View

Любой код, который вы добавляете внутри метода drawRect(_:), будет нарисован при создании экземпляра подкласса UIView.  Представление автоматически настраивает среду рисования, чтобы вы могли сразу начать работать. Представление настраивает CGContextRef, упомянутое в начале этого урока, и внутренний метода drawRect(_:) на который вы получите ссылку.

2. Стартовый проект

Чтобы мы начали быстро, я подготовил стартовый проект, в котором есть все представления, они подключены и готовы к использованию. UIView subclasses названы как команда рисования, которую мы будем изучать. Например, когда мы будем изучать линии, соответствующий класс будет называться DrawLinesView.

Вы можете скачать стартовый проект на GitHub. На следующем этапе мы начнем писать код.

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

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

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

4. Рисуем линию

Если вы загрузили стартовый проект, откройте DrawLineView.swift и добавьте следующее в метод drawRect(_ :).

Сначала мы получаем ссылку на контекст рисунка, об этом мы говорили ранее.  Поскольку это то, что мы будем делать в каждом примере, я не буду упоминать об этом далее.

Функция CGContextSetStrokeColorWithColor(_:_:) устанавливает цвет, которым линия будет проведена или заштрихована.  Параметры, которые мы передаем, - это графический контекст и новый цвет штриха.

Если вы рассматриваете графический контекст как холст художника, тогда Функция CGContex tMoveToPoint(_:_:_:) перемещает кисть в определенную точку на холсте, из которой можно начать или продолжить рисовать.  Представьте себе рисунок на листе бумаги, мы поднимаем руку и переместившись на другую часть бумаги продолжаем рисовать.  По сути, это то, что выполняет этот метод.  Мы передаем графический контекст и координату x и y для начала рисования.

Функция CGContextAddLineToPoint(_:_:_:) принимает в качестве параметров графический контекст, значение x для конца сегмента линии и значение y для конца сегмента линии. После добавления сегмента линии текущая точка будет установлена в конечной точке сегмента линии. Мы начали операцию рисования в точке (0,0), после этой операции рисования курсор или кисть находились в точке (200,200). 

Наконец, чтобы сделать фактический рисунок, вам нужно вызвать функцию CGContextStrokePath(_:), проходящую в графическом контексте. Функция просто рисует линию вдоль пути, который мы указали.

Соберите и запустите проект, чтобы увидеть эффект.

5. Рисуем Прямоугольник

Откройте DrawRectangleView.swift и добавьте следующий после drawRect(_:) метод. Вы должны быть знакомы с первыми двумя строками. Вы должны быть знакомы с первыми двумя строками.

Функция CGRectMake(_:_:_:_:) является частью CGGeometry и обеспечивает простой способ создания структуры CGRect. Как следует из его названия, CGRect представляет собой структуру, которая содержит местоположение и размеры прямоугольника.  CGRect имеет два поля, начало и размер, которые называются CGPoint и CGSize соответственно.  Если вы не знакомы с этими типами данных, прочитайте подробнее в инструкции CGGeometry

Мы создаем константу, rectangle, используя функцию CGRectMake(_:_:_:_:) и вызываем функцию CGContextAddRect (_:_:), которая принимает в качестве параметров графический контекст и CGRect.  Наконец, мы вызываем CGContextStrokePath(context), чтобы нарисовать прямоугольник. 

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

6. Рисуем круг

Откройте DrawCircleView.swift и обновите метод drawRect(_:) следующим образом.

Возможно, вам интересно, почему мы вызываем CGRectMake(_:_:_:_:), когда мы рисуем круг? Прямоугольник - это область, в которую должен входить круг.  В приведенном выше коде мы создаем круг используя квадрат.  Если вы хотите нарисовать овал или эллипс, вам нужно сделать прямоугольник более прямоугольным с углов.

Затем мы вызываем функцию CGContextAddEllipseInRect(_:_:), которая принимает в качестве параметров графический контекст и прямоугольник, в котором можно нарисовать эллипс. Круг рисуется путем вызова CGContextStrokePath(_:), проходящего в графическом контексте.

7. Рисуем дугу

Откройте DrawArcView.swift и добавьте следующий код внутри метода drawRect(_:).


Функция CGContextAddArc(_:_:_:_:_:_:_:) принимает довольно много параметров:

  • графический контекст
  • значение x для центра дуги
  • значение y для центра дуги
  • радиус дуги
  • угол к начальной точке дуги, измеренный в радианах с положительной оси x
  • угол до конечной точки дуги, измеренный в радианах с положительной оси x
  • значение 1 для создания дуги по часовой стрелке или значение 0 для создания против часовой стрелки дуги

8. Рисуем путь

Для создания более сложных фигур, вы создаете путь и обводите его.  Взгляните на метод drawRect(_:) в файле DrawPathView.swift.

В методе drawRect(_:), мы вызываем CGContextAddLineToPoint(_:_:_:) несколько раз, чтобы создать треугольник. Обратите внимание, что треугольник не заполнен, только обведён. На следующем этапе мы увидим, как заполнить треугольник цветом.

9. Заливка пути

Откройте файл FillPathView.swift и обновите метод drawRect(_:), как показано ниже.

На предыдущем шаге мы обвели путь, но вы также можете заполнить путь определенным цветом. В приведенном выше методе drawRect(_:) мы начинаем с создания пути для того же треугольника, что и в предыдущем примере. На этот раз мы устанавливаем цвет заливки с помощью функции CGContextSetFillColorWithColor(_:_:) и вызываем функцию CGContextFillPath(_:), а не CGContextStrokePath(_:).

10. Заливка эллипса

Кроме заливки пути, вы также можете заполнять цветом эллипсы и прямоугольники.  В этом примере мы заполним цветом эллипс. Заливка прямоугольника очень похожа. Документация расскажет вам, как это сделать. Обновите метод drawRect(_:) в файле FillEllipseView.swift, как показано ниже.

Большая часть этого кода должна быть уже знакома. Мы используем новую функцию CGContextSetLineWidth(_:_:), чтобы установить ширину линии, и мы вызываем функцию CGContextFillEllipseInRect (_:_:) для заполнения цветом эллипса.  Эта функция принимает в качестве параметров графический контекст и прямоугольник для заполнения эллипса.

11. Добавляем линии 

Функция CGContextAddLines(_:_:_:) – очень удобна, когда у вас есть несколько связанных сегментов прямой линии, которые вы хотите нарисовать.  Здесь мы воссоздадим треугольник из предыдущего примера, используя функцию CGContextAddLines(_:_:_:).  Добавьте следующий код в файл AddLinesView.swift.

Функция CGContextAddLines (_:_:_:) принимает в качестве параметров графический контекст, массив значений, который определяет начальную и конечную точки сегментов линии для рисования структур CGPoint, и число элементов в массиве.  Следует отметить, что первая точка в массиве указывает начальную точку.

12. Рисуем градиент

С помощью Quartz 2D, легко нарисовать градиент.  Поддерживаются как линейные, так и радиальные градиенты.  В этом примере мы нарисуем линейный градиент. Документация поможет вам, если вы заинтересуетесь радиальными градиентами. Добавьте следующий код в файл DrawGradientView.swift

Функция CGContextDrawLinearGradient(_:_:_:_:_:) принимает в качестве параметров:

  • графический контекст
  • структуру CGGradient
  • начальную точку
  • конечную точку
  • значения опций, которые определяют, расширяется за пределы начальной или конечной точки

Структура CGGradient определяет плавный переход между цветами по всей области.  Он имеет цветовое пространство, два или более цветов и место для каждого цвета.  Константы colorspace, colors и locations в приведенном выше примере представляют составные части CGGradient

Для рисования градиента мы вызываем функцию CGContextDrawLinearGradient(_:_:_:_:_:), проходящую в графическом контексте, CGGradient, начальные и конечные значения и 0, чтобы указать, что заполнение должно выходить за пределы исходного местоположения.

13. Рисование тени

Тень это изображение, нарисованное снизу и смещенное по отношению к графическому объекту, поэтому тень имитирует эффект источника света, направленного на графический объект. — Quartz 2D Programming Guide

Существуют две функции, которые можно использовать для рисования теней, CGContextSetShadow (_:_:_:) и CGContextSetShadowWithColor (_:_:_:_:).  При использовании CGContextSetShadow(_:_:_:) все нарисованные объекты затеняются черным цветом с 1/3 альфа канала.  Функция CGContextSetShadowWithColor(_:_:_:_:   позволяет вам указать цвет для тени.

Давайте посмотрим, как это работает на практике. Добавьте следующий код в файл SetShadowWithColor.swift.

При рисовании тени вы должны сохранить состояние графического контекста, внести необходимые изменения и затем восстановить состояние графики.  Мы вызываем CGContextSaveGState(_:) для сохранения текущего состояния графического контекста, указываем смещение тени, shadowOffset и вызываем CGContextSetShadowWithColor(_:_:_:_:).  Эти функции принимают в качестве параметров:

  • графический контекст
  • смещение тени
  • размер размытия 
  • цвет тени

Остальная часть кода должна быть вам знакома.  И наконец, мы восстанавливаем графический контекст, вызывая CGContextRestoreGState(_:), проводя его в графическом контексте.

14. Рисуем смайлик

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

Реализация метода drawRect(_:) теперь имеет смысл, и у вас должен появиться смайлик на экране.

Завершение

Итак мы подошли к концу нашего урока.  Теперь вы должны иметь представление о том, как создать рисунок, используя движок Quartz 2D.  Надеюсь, вы нашли для себя что-то полезное, прочитав эту статью.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.