Недавно обнаружил, что на хабре нет статей по работе с Core Graphics в iOS, также как не нашел подобных статей на русском языке. На сайте Apple для разработчиков есть документация по работе с 2D графикой в iOS — Core Graphics Framework Reference, включающее 400 страниц документации, полезной в качестве справки, но не дающей начального представления о работе с видами и рисованием. Поэтому я решил написать вводную статью по работе с 2D графикой в iOS.
Введение
Известно, что Cocoa Touch не включает AppKit, предоставляющий классы и методы для работы интерфейсом в Mac OS X. Вместо AppKit на платформе iOS для работы с 2D используется низкоуровневый Cи-фреймворк Core Graphics, который также является частью Mac OS X SDK, но используется реже, так как Си-функции и работа с памятью не настолько удобные и гибкие, как классы Objective-C в AppKit. Кроме того, очевидно, что при работе с Core Graphics приходится писать больше кода, который сложнее расширять и поддерживать. В этой статье мы создадим Custom View и познакомимся с возможностями фреймворка.
Начало работы
Для начала нам нужно создать приложение и добавить в него Custom View, на котором далее мы будем рисовать наши объекты. Создадим в Xcode View-based Application и назовем его Graphics.
Далее добавим наш View (Cmd+N) и назовем его MyCanvas, который будет классом Objective-C и сабклассом UIView.
Всё «рисование» происходит в методе:
— (void)drawRect:(CGRect)rect < // Рисуем тут >
Нарисуем простой квадрат с помощью метода drawRect:. Все рисование происходит в контексте (context), который определяет, где происходит рисование. Чтобы получить context используется Си-функция UIGraphicsGetCurrentContext. В iOS центр координат при рисовании находится в левом верхнем углу, а не в левом нижнем, как у Mac OS X.
Очищать контекст необходимости в данном случае нет, так как мы не будем перерисовывать нашу графику, однако это хорошая практика очищать графические элементы перед рисованием. Следует учесть, что после очистки View станет чёрным.
Функция CGContextSetRGBFillColor устанавливает цвет заливки для данного контекста, а функция CGContextFillRect рисует квадрат.
Теперь запустим наше приложение в симуляторе (Cmd+R), и как мы видим, ничего не произошло. Дело в том, что мы не создали наш View и не добавили его в иерархию. Существует два способа создания View, в том числе и Custom View — Interface Builder и непосредственно с помощью кода. Что касается IB, всё просто, добавляем элемент UIView перетаскиванием и устанавливаем ему Custom Class: MyView в Identity Inspector. Для того, чтобы создать наш View вручную создадим его в GraphicsViewController.m:
Для добавления View в иерархию используется addSubview:, для удаления из иерархии removeFromSuperview:. При этом первый метод отправяется супервиду, а второй виду, который нужно удалить.
Подробнее о работе с памятью будет рассказано в конце статьи, здесь только отмечу, что необходимо иметь в виду, когда мы освобождаем из верхний view в иерархии, мы также освобождаем все его subviews, и если потом обратимся к ним, приложение упадет.
Теперь, если мы запустим наше приложение, то увидим красный квадрат с отступами в 20 поинтов. При рисовании мы используем поинты (pt), а не пиксели (px), для того, чтобы размеры были одинаковы для Retina и обычного дисплея. Работа с пикселями также возможна. Для определения типа экрана у конкретного устройства используется свойство @property CGFloat contentScaleFactor; которое возвращает «масштаб» (сколько пикселей в поинте для данного view на экране). Значение может быть 2.0 для retina или 1.0 для обычного экрана.
Рассмотрим работу с другими примитивами: 1) Окружность c синей заливкой, создается методом CGContextFillEllipseInRect, и вписывается в прямоугольник, таким образом можно создавать эллипсы.
2) Окружность без заливки с зеленый контуром и толщиной линии 3, толщина линии задается методом CGContextSetLineWidth, а окружность без заливки рисуется методом CGContextStrokeEllipseInRect.
4) Безье сплайн. В данном случае нужно задать начальную и конечную точки, а также координаты точек, задающих кривизну. Для тех, кто не знаком с кривыми Безье, краткий краш-курс: Зададим точки отдельными CGPoint’ами, чтобы не путаться:
Для выбора шрифта, размера, стиля отображения, метрики можно использовать объект UIFont. А с помощью метода [UIFont familyNames] можно получить массив доступных шрифтов.
Если мы хотим использовать UILabel и при этом создать его программно, а не в Interface Builder, добавим следующий код в наш GraphicsViewController.m:
UILabel *scaleNumber = [[UILabel alloc] initWithFrame:CGRectMake(160, 140, 140, 21)]; //создаем объект, который будет являться нашим View scaleNumber.textColor = [UIColor yellowColor]; //задаем цвет текста scaleNumber.backgroundColor = [UIColor colorWithWhite:0 alpha:0]; //создаем прозрачный фон, чтобы наш текст не был в белом (или другого цвета) прямоугольнике scaleNumber.text = @»Vitaly Ishkulov»; //какой-нибудь текст scaleNumber.adjustsFontSizeToFitWidth = YES; //можно сделать, чтобы текст автоматически уменьшался, если не помещается, при этом увеличиваться больше заданного размера (или системного, если размер не задан) текст не будет [myView addSubview:scaleNumber]; //добавляем наш текст в иерархию View [scaleNumber release]; //освобождаем из памяти, так как мы передали управление/владение текстом нашему виду myView
Заключение и немного слов о работе с памятью
На этом краткое введение в CoreGraphics закончено, надеюсь оно окажется кому-нибудь полезным.
Intel Graphics Drivers
Разработчик:
Intel Corporation (США)
Лицензия:
Бесплатно
Версия:
30.0.101.1121 Beta (Windows 10 и 11, 64-bit) / 30.0.101.1069 DCH (Windows 10 и 11, 64-bit) / 15.45.34.5174 (Windows 7 и 8.1, 32-bit и 64-bit)
Обновлено:
2021-11-16
Системы:
Windows
Интерфейс:
русский / английский
Рейтинг:
Ваша оценка:
О программе
Что нового
Новое в версии 30.0.101.1121 Beta :
Новое в версии 30.0.101.1069 DCH :
Новое в версии 27.20.100.9466 DCH (16.04.2021):
Новое в версии 15.36.41.5180 (16.04.2021):
Новое в версии 15.40.48.5171 (05.02.2020):
Системные требования
Подробную информацию о поддерживаемом оборудовании и доступных технологиях, смотрите в примечаниях в выпускам, ссылки на которые находятся в разделе «Что нового».
Версия 30.0
Поддерживаемые графические процессоры:
Версия 15.45
Поддерживаемые графические процессоры:
Версия 15.40
Полезные ссылки
Подробное описание
Intel Graphics Drivers – это обязательный к установке пакет программного обеспечения, необходимый для полноценного функционирования графических процессоров Intel. Несмотря на то, что операционная система применяет универсальный драйвер для использования основных функции оборудования, установка полных и обновлённых версий драйверов и необходимого программного обеспечения Intel, позволяет добиться наивысшей производительности и стабильности, реализации всех доступных функций и технологий, а также свести к минимуму проблемы совместимости и различные ошибки в работе системы.
Состав установочного пакета драйверов Intel Graphics
Центр управления графикой Intel
Начиная с версии драйверов DCH для Windows 10, Центр управления графикой Intel получил крупное обновление и различные улучшения. Он больше не будет включён в состав установочных файлов драйверов, но будет автоматически загружаться и устанавливаться при первом подключении к интернету. Также, программу можно установить самостоятельно из магазина Microsoft Store.
Новый центр управления графикой, основан на функционале предыдущих версий Панели управления графикой Intel, но имеет обновленный дизайн и более удобный доступ к различным функциям и настройкам. Приложение сканирует установленные игры и позволяет оптимизировать игровые настройки в один клик, для обеспечения максимальной производительности на данной аппаратной конфигурации. Также, вы можете создавать собственные игровые профили для настройки отдельных игровых параметров и быстрого переключения между ними.
core graphics
базовая графика Любое стилевое/цветовое или иное сочетание графических элементов, разработанное в поддержку эмблемы, символики и коммуникаций Игр. Базовая графика часто служит фоном эмблемы Игр и связующей основой всех атрибутов, созданных для Игр. [ Департамент лингвистических услуг Оргкомитета «Сочи 2014». Глоссарий терминов ]
core graphics Any pattern/color or any other combination of graphic elements that is used to support the emblem and Games marks and communications. The core graphic often serves as a background to the Games emblem and is used as a vehicle to visually align all applications produced for the Games. [ Департамент лингвистических услуг Оргкомитета «Сочи 2014». Глоссарий терминов ]
Тематики
Смотреть что такое «core graphics» в других словарях:
Core Text — is a Core Foundation style API in Mac OS X, first introduced in Mac OS X 10.4 Tiger, made public in Mac OS X 10.5 Leopard, and introduced for the iPad with iPhone SDK 3.2. Exposing a C API, it replaces the text rendering abilities of the now… … Wikipedia
Core Data — Developer(s) Apple Inc. Stable release 3.2.0 Operating syst … Wikipedia
Core Animation — (Графическая модель Mac OS X) Тип System Utility Разработчик Apple Inc. Операционная система Mac OS X Лицензия Проприетарн … Википедия
Core Audio — Developer(s) Apple Inc. Stable release 3.2.6 Operating system Mac OS X, iOS … Wikipedia
Core Foundation — (also called CF) is a C application programming interface (API) in Mac OS X iOS, and is a mix of low level routines and wrapper functions. Apple releases most of it as an open source project called CFLite that can be used to write cross platform… … Wikipedia
Core Services — are a set of Mac OS X and iOS application programming interfaces that architecturally are underneath Carbon, Cocoa and Cocoa Touch. In addition to Core Foundation,[1] it also encompasses other APIs including Grand Central Dispatch, Blocks,… … Wikipedia
Core Image — Mac OS X graphics model Rendering QuickDraw • Core OpenGL Quartz 2D • Core Image Core Animation • … Wikipedia
Core OpenGL — Mac OS X graphics model Rendering QuickDraw • Core OpenGL Quartz 2D • Core Image Core Animation • Core Video ColorSync • QuickTime Compositing … Wikipedia
Core Video — Mac OS X graphics model Rendering QuickDraw • Core OpenGL Quartz 2D • Core Image Core Animation • Core Video ColorSync … Wikipedia
Core Animation — Mac OS X graphics model Rendering QuickDraw • Core OpenGL Quartz 2D • Core Image Core Animation • Core Video Color … Wikipedia
Туториал по Core Graphics: градиенты и контексты
Туториал по Core Graphics: градиенты и контексты
Из этого туториала по Core Graphics вы узнаете, как разработать современное приложение для iOS с продвинутыми элементами Core Graphics, такими как градиенты и трансформации.
В этой статье мы научимся рисовать градиенты и манипулировать CGContexts с преобразованиями.
Core Graphics
Теперь вам придется покинуть уютный мир UIKit и окунуться в подземелья Core Graphics.
Это изображение от Apple концептуально описывает соответствующие фреймворки:
Фреймворк Core Graphics основан на продвинутом движке Quartz. Это обеспечивает низкоуровневый, легкий 2D рендеринг. Вы можете использовать этот фреймворк для обработки изображений на основе контуров, их преобразований, управления цветами и многого другого.
Давайте начнем
К концу данного туториала вы создадите некий график, который будет выглядеть примерно так:
Прежде выводить информацию на графике, вы настроите его в Storyboard и создадите код, который создает анимированный переход и показывает график.
Полная иерархия представлений будет выглядеть следующим образом:
Сначала загрузите материалы проекта. Когда вы откроете проект, вы заметите, что он очень похож на то, что у вас получилось после прохождения предыдущего туториала. Единственная отличие от проекта из предыдущего туториала состоит в том, что в Main.storyboard CounterView находится внутри другого представления с желтым фоном. Запустите проект, вот что вы увидите:
Создание графа
Измените константы ограничений в Size Inspector, чтобы они соответствовали константам, приведенным на изображении:
Ваш Document Outline должен выглядеть так:
Причина, по которой вам нужен Container View, заключается в том, что без него не получиться сделать анимированный переход между Counter View и Graph View. Перейдите в раздел ViewController.swift и добавьте аутлеты свойств для Container view и Graph view.
Это создает аутлет для Container view и Graph view. Теперь подключите их к представлениям, которые вы создали в Storyboard. Вернитесь к Main.storyboard и перетащите Container view и Graph view к соответствующим аутлетам:
Настройка анимированного перехода
Все еще находясь в разделе Main.storyboard, перетащите Tap Gesture Recognizer из Object Library в Container View в Document Outline.
Затем, перейдите в ViewController.swift и добавьте это свойство в начало класса:
Это свойство указывает, отображается ли в данный момент представление графика.
Теперь добавьте этот метод касания, чтобы сделать переход:
Если пользователь нажимает кнопку “+” во время отображения графика, дисплей поворачивается назад, чтобы показать счетчик. Теперь, чтобы этот переход заработал, вернитесь на Main.storyboard и перетащите ваш жест касания к недавно добавленному counterViewTap(gesture:) : Запустите. Вы увидите Graph View при запуске приложения. Позже вы сделаете Graph View скрытым для того, чтобы сначала на экране появилось представление счетчика. Нажмите на него, и вы увидите флип-переход.
Анализ Graph View
В Core Graphics изображение будет отрисовываться от заднего плана к переднему. Поэтому сначала вам нужно сформировать в голове определенный порядок элементов, а уже потом переводить его в код. Это последовательность для графика Flo:
Рисование градиента
Нарисуем градиент в представлении графика.
Откройте GraphView.swift и замените код на:
Вот что вам нужно знать из приведенного выше кода:
Откройте Main.storyboard, и вы увидите, что в представлении графика появился градиент.
В Storyboard выберите Graph View. Затем в Attributes inspector измените Start Color (цвет начала градиента) на RGB(250, 233, 222), а End Color (цвет конца градиента) на RGB (252, 79, 8). Для этого нажмите на Color, а затем на Custom:
Теперь давайте приведем все в порядок. В Main.storyboard выберите каждое представление по очереди, кроме основного, и установите значение «Clear Color» в параметр «Background Color». Вам больше не нужен желтый цвет, а все кнопки все равно будут иметь прозрачный фон. Теперь запустите проект. Вы заметите, что график начал выглядеть намного лучше, ну или, по крайней мере обзавелся адекватным фоном.
Отсечение областей
Используя градиент, вы заполнили всю область контекста представления. Однако, если вы не хотите заполнять всю область, вы можете создать контуры для обрезки области градиента.
Теперь, в начало draw(_:) добавьте этот код:
Это создаст область отсечения, которая будет ограничивать градиент. Позже, вы будете использовать этот же прием, чтобы нарисовать второй градиент под линией графика.
Запустите и убедитесь, что у представления графика есть красивые закругленные углы:
Заметка
Если Вы используете Core Animation, вы будете использовать свойство CALayer cornerRadius вместо отсечения.
Расчет точек графика
Сделаем небольшой перерыв и займемся самим графиком. Вам нужны 7 точек. Ось X будет днями недели, а ось Y показателем выпитых стаканов воды.
Во-первых, создайте примерные данные.
Находясь в разделе GraphView.swift, в начале этого класса добавьте эти свойства:
Здесь содержатся примерные данные, которые представляют собой показания за семь дней.
Добавьте этот код в начало draw(_:) :
И вот этот код в конец draw(_:) :
Ось X состоит из 7 равноудаленных друг от друга точек. Приведенный выше код, по сути, является безымянной функцией. Его можно было бы добавить в наш проект как функцию, но для небольших вычислений, подобных этому, вы можете оставить все и в таком состоянии.
columnXPoint требует в качестве аргумента столбец и возвращает значение, в котором содержится положение точки на оси X.
Добавьте этот код для вычисления точек оси Y в конце draw(_:) :
columnYPoint также является безымянной функцией, которая берет значение из массива для дня недели в качестве параметра. Она возвращает позицию Y между 0 и наибольшим количеством выпитых стаканов. Поскольку точка отсчета в Core Graphics находится в левом верхнем углу, а вы рисуете график из исходной точки в нижнем левом углу, функция columnYPoint корректирует возвращаемое значение, чтобы график был ориентирован в правильном направлении. Продолжим, добавив код для рисования линии в конец draw(_:) :
Теперь, когда вы убедились, что линия рисуется правильно, удалите это из конца draw(_:) :
Это кусочек кода нужен был того, чтобы вы могли проверить строку в Storyboard и убедиться, что все расчеты верны.
Создание градиента для графика
Теперь создадим градиент под графиком, используя сам график в качестве контура для отсечения. Сначала обозначьте контур отсечения в конце draw(_:) :
В приведенном выше коде вы:
Сейчас ваше представление графика в Storyboard`е должно выглядеть следующим образом:
Сейчас мы заменим зеленый цвет градиентом, который создадите из цветов, используемых для градиента фона. Замените временный код в комментарии №5 этим кодом:
В этом блоке кода мы находим наибольшее количество выпитых стаканов и используем его в качестве отправной точки градиента. Вы не можете заполнить rect тем же способом, как вы делали это с зеленым цветом. Градиент будет заполнять пространство над контекстом, а не над графиком, и желаемый градиент не будет отображаться. Обратите внимание на комментарии к context.restoreGState() : Вы удалите их после того, как нарисуете круги вокруг точек графика. В конце draw(_:) добавьте следующее:
Этот код рисует исходный контур. Теперь ваш график действительно начинает обретать внешний вид:
Рисуем точки графика
В конце draw(_:) добавьте это:
В приведенном выше коде вы отрисовываете точки графика в виде заполненных круговых контуров для каждого элемента массива в вычисленных точках X и Y.
Однако, эти окружности выглядят неровными.
Рассмотрим состояние контекстов
Причина странного вида окружностей связана с контекстами. Графические контексты могут сохранять состояния. Таким образом, когда вы задаете множество свойств контекста, таких как цвет заливки, матрица преобразования, цветовое пространство или область клипа, вы фактически устанавливаете их только для текущего состояния графика.
Находитесь в GraphView.swift, в draw(_:) раскомментируйте context.saveGState() прежде чем создавать контур отсечения. Кроме того, раскомментируйте context.restoreGState() до того, как начнете его использовать.
Теперь Ваша линия графика и окружности должны выглядеть намного лучше:
В конце draw(_:) добавьте этот код, чтобы отрисовать три горизонтальные линии:
Относительно не трудно, не так ли? Вы просто двигаетесь к точке и рисуете горизонтальную линию.
Добавление меток для графика
Теперь добавим метки, чтобы сделать график более понятным.
Перейдите к ViewController.swift и добавьте следующие свойства для аутлетов:
Это добавляет аутлеты для динамического изменения текста метки average water drunk, метки max water drunk, а также меток day name стекового представления.
Теперь перейдите к Main.storyboard и добавьте следующие представления как подпредставления Graph View:
Удерживая клавишу shift, щелкните на все метки, а затем измените шрифты на пользовательский стиль Avenir Next Condensed, Medium.
Если у вас возникли проблемы с настройкой этих меток, ознакомьтесь с кодом в конечном проекте, используя кнопку «Загрузить материалы» в верхней или нижней части этого туториала.
Теперь, когда Вы закончили настройку Graph View, в Main.storyboard выберите Graph View и установите флажок Hidden, чтобы график не появлялся при первом запуске приложения.
Откройте ViewController.swift и добавьте этот метод для настройки меток:
Это выглядит немного громоздко, но Вам нужно это, чтобы настроить календарь и получить текущий день недели. Чтобы сделать это, Вы:
Запустите. Нажимаем на счетчик и видим, как график поворачивается к нам. Следовательно, все работает исправно.
Mastering the Matrix
Приложение выглядит действительно хорошо, однако, можно улучшить представление счетчика, добавив маркировку, чтобы указать каждый выпитый стакан:
Теперь, когда Вы немного попрактиковались с функциями CG, вы будете использовать их для поворота и перевода контекста чертежа.
Заметьте, что эти маркеры исходят из центра:
Помимо рисования в контексте, у Вас есть возможность манипулировать контекстом, поворачивая, масштабируя и переводя матрицу преобразования контекста.
Сначала всё это может показаться запутанным, но после того, как Вы разберете эти упражнения, Вам станет понятнее. Порядок преобразований очень важен, поэтому, вот несколько диаграмм, чтобы объяснить последовательность действий.
Следующая диаграмма является результатом поворота контекста, а затем рисования прямоугольника в его центре.
Черный прямоугольник рисуется перед поворотом контекста, за которым следуют зеленый и красный. Нужно заметить две вещи:
Когда Вы рисуете маркеры Counter View, Вы сначала переводите контекст, прежде чем его поворачивать.
На этой диаграмме маркер прямоугольника находится в самом верхнем левом углу контекста. Синие линии очерчивают переведенный контекст. Красные пунктирные линии указывают на вращение. После всего этого, Вы переводите контекст снова.
Когда Вы нарисуете красный прямоугольник в контексте, Вы заставите его появиться под углом.
После того как Вы повернете и переведете контекст, чтобы нарисовать красный маркер, Вам нужно сбросить центр, чтобы Вы могли снова повернуть и перевести контекст, и затем нарисовать зеленый маркер.
Точно так же, как Вы сохранили состояние контекста с контуром отсечения в Graph View, Вы будете сохранять и восстанавливать состояние с помощью матрицы преобразования каждый раз, когда Вы рисуете маркер.
Рисование маркеров
Используя этот код, Вы:
Хорошая работа! Теперь Вы можете восхищаться эстетичным и информативным видом интерфейса Flo:
Материалы к статье.
