Слайд 20.

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

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

Слайд 21

РОЛЬ ЛИНИИ В КОМПОЗИЦИИ

1. Линия делит композицию на части
2. Линия помогает объединить элементы или части плоскости в их изобразительное целое.
3. Линии, своей направленностью, сгущенностью, пересечениями определяют движение и экспрессию всего изображения.
4. Линии влияют на ритмическое построение композиции

Слайд 22

Линия изображенная от края до края листа делает композицию открытой

Различная толщина и длина линий создает ощущений д

Презентация «Композиция в конструктивных искусствах

Слайды и текст этой презентации

Слайд 1

Программа по изобразительному искусству под редакцией Б.М. Неменского для 8 класса
Тема: Композиция в конструктивных искусствах . Прямые линии и организация пространства.
Давыдова Елена Егоровна Учитель изобразительного искусства МБОУ «Средняя  общеобразовательная школа с углубленным изучением  отдельных предметов №55 имени Александра Невского» г. Курска 2015 г

Слайд 2

Законы композиции
3 . Использование законов асимметрии, динамического равновесия
1. Равновесие
2. Симметрия в композиции

Слайд 3

5 Законы передачи динамики в композиции
4 Законы передачи статики в композиции

Слайд 4

Открытая композиция
Замкнутая глубинная композиция

Слайд 5

Ритм в композиции
Ритм- чередование изобразительных элементов и свободных пространств
1. Одинаковый мотив. Сгущение и разрежение элементов.
2. Элементы одинакового мотива имеют разный размер и поворот, а также расстояние между элементами

Слайд 6

Прямые линии и организация пространства
Среди элементов плоскостной композиции важное место занимают линии. Сочетание различных прямоугольников и линий придает композиции большее разнообразие и зрелищность

Слайд 7

Прямая линия- простой выразительный элемент, делит плоскость на части и одновременно усиливает взаимосвязь всех элементов композиции.
Малевич Казимир Северинович Супрематизм. Беспредметная композиция

Слайд 8

Линия делит композицию на части Линия помогает объединить элементы или части плоскости в их изобразительное целое.
Супрематизм. 1917. Малевич Казимир Северинович

Слайд 9

3. Линии, своей направленностью, сгущенностью, пересечениями определяют движение и экспрессию всего изображения. 4. Линии влияют на ритмическое построение композиции
Композиция VIII Василий Кандинский

Слайд 10

Линия изображенная от края до края листа делает композицию открытой.
Различная толщина и длина линий создает ощущений движения и ритма

Слайд 11

Слайд 12

Задание Создайте композицию из 2-3 прямоугольников и 3-4 прямых линий, которые своим расположением связывают элементы в единое композиционное целое. Создайте: А) фронтальную композицию Б) глубинную композицию

Слайд 13

Информационные источники: А.С.Питерских Г.Е. Гуров. Изобразительное искусство7-8 кл Москва «Просвещение»2014 г. http://www.artscroll.ru/Images/2008/m/Malevich%20Kazimir%20Severinovich/000222.jpg —  Супрематизм. Живописные Объемы В Движении. 1915 Малевич Казимир Северинович Казимир Северинович Малевич  http://aestheticperspectives.com/wp-content/uploads/2013/01/Inventing-abstraction-post-8-kazimir-malevich2.jpg Казимир Северинович Малевич http://www.kunstbutler.com/Bilder/9731.jpg

Слайд 14

http://www.diegomoya.org/obras/albums/userpics/10003/C4-Malevich-suprematismnonobjectiv_resize.jpg — Супрематизм. Беспредметная композиция1915 Малевич Казимир Северинович http://posztinfo.hu/upload/5/5476877136cfaa1eeb9f3ce834b6fb1e_Malevics___Szuprematizmu s.jpg- Супрематизм. 1917 Малевич Казимир Северинович http://vr.theatre.ntu. edu.tw/fineart/painter-wt/kandinsky/kandinsky-1923x.jpg- Композиция VIII Василий Кандинский http://www.artscroll.ru/Images/2008d/m/Malevich%20Kazimir%20Severinovich/000217_disp.jpg Супрематизм. 1915 Малевич Казимир Северинович

Презентация по изобразительному искусству на тему «Гармония цвета

Описание презентации по отдельным слайдам:

Гармония цвета Элемент композиционного творчества

Цвет является мощным художественно-выразительным средством. Он больше, чем любой другой элемент композиции, обращён к нашим чувствам. Никакое иное изобразительное средство так не воздействует на восприятие вещи, её образа и формы.

Композиционное сочетание цветов Яркая окраска транспортного средства, стильно-утончённый цвет интерьера, эффектная одежда, неожиданная и броская по цвету реклама или журнал привлекают наше внимание и обостряют восприятие.

Основы цветоведения Обычно все зрительные ощущения цвета разделяют на две группы. Одну группу составляют Ахроматические цвета: Черный, белый и все серые (от самого тёмного до самого светлого). Это так называемые нейтральные цвета. К другой группе относятся Хроматические цвета- все цвета, кроме чёрного, белого и серых.

В конструктивных искусствах определённую часть поверхности вещи или здания окрашивают локальным цветом. В графическом дизайне при помощи цвета организуется плоскость обложки журнала, рекламного плаката и создаётся их зрительный образ. Использование цвета в произведениях дизайнеров, архитекторов и художников делает среду нашей жизни эстетически богатой и эмоционально насыщенной

Очень велика эмоциональная и психологическая роль цвета в плоскостной композиции. Например, необязательно раскрашивать всю плоскость обложки книги или стену. Достаточно ввести цветное пятно, чтобы всё пространство перестало быть чёрно-белым (монохромным), а воспринималось как цветное.

Более того, образное впечатление движения, лёгкости или плотности. Веселья или строгости может создаваться не только цветными линиями, но и другими цветовыми формами (кругами, квадратами, прямоугольниками и пр.).

Симметрия- асимметрия. Если симметричная композиция создает впечатление покоя, тишины, торжественности, передает чувство уравновешенности, то асимметричной композиции ближе ощущение движения, беспокойства. В такой композиции составляющие части относительно центральной оси неодинаковые.

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

Основные направления в искусстве 20 века Импрессионизм Постимпрессионизм Модерн модернизм В живописи: Фовизм Экспрессионизм Кубизм Абстракционизм Сюрреализм В архитектуре: Конструктивизм функционализм

Абстракционизм «Abstractio» означает «отвлечение»- направление так называемого “беспредметного”, нефигуративного искусства, провозгласившего в живописи и скульптуре отказ от изображения форм реальной действительности и стремящееся к “гармонизации” или отвлеченных цветовых сочетаний, или геометрических форм, плоскостей, прямых и ломаных линий, которые должны вызывать самые разнообразные ассоциации.

Течения абстракционизма К.Малевич В.Кандинский К.малевич «Чёрный квадрат» «Маскарад» «Атлеты» 1913 1919 1926 П.Мондриан М.Ларионов « красный лучизм» 1913

Основоположники абстракционизма-русские художники Василий кандинский и казимир малевич, голландец пит мондриан. Василий казимир пит мондреан кандинский малевич

Кандинский Василий Васильевич (1866-1944), выдающийся русский живописец, график и теоретик изобразительного искусства, один из основоположников абстракционизма. Расцвет творчества художника приходится на годы, когда он преподавал при мюнхенской художественной школе. В 1909 г. Кандинский организовал «Новое художественное объединение», где вырабатывает новаторскую концепцию «ритмического» использования цвета в живописи.

Пит Мондриан (1872-1944) (наст. имя Питер Корнелис) — голландский художник. Его картины, представляющие собой сочетания прямоугольников и линий, являются примером наиболее строгой, бескомпромиссной геометрической абстракции в современной живописи Используя прямые линии жестких контуров, он делал композиции асимметричными, достигая динамического равновесия. Благодаря отказу от частностей и деталей он надеялся достичь более ясного выражения универсальных первооснов творчества, стремясь обрести то, что он называл «чистой пластической реальностью».

Малевич Казимир Северинович (1878 — 1935) российский живописец, график, педагог, теоретик искусства, философ. Основоположник одного из видов абстрактного искусства, так называемого супрематизма. . В 1929 состоялась его персональная выставка в Государственной Третьяковской галерее. В 1930 его работы были выставлены в Австрии и Германии.

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

Задание № 1 акцентирующая роль цвета Создайте композицию из 2-3 прямоугольников, 3-4 прямых линий и небольшого цветного кружка, который должен стать доминантой в композиции. Постарайтесь добиться эмоционально-цветового преображения плоскости (её зрительного «расширения», «замкнутости» и т.д.).

Задание № 2 ритмическая организация пространства цветовыми элементами На чёрном или белом фоне создайте композицию из цветных линий, квадратов, прямоугольников и кругов. Выполните композицию в тёплой или холодной гамме. При помощи ритмического построения цветовых пятен постарайтесь решить в композиции различные эмоционально- образные задачи (создать, например, образ радости, строгости, печали и т.д.).

Задание № 3 композиция цветового пространства Создайте композицию из произвольного количества разнообразных фигур по принципу цветовой гармонии или контраста. Работу выполните на цветном фоне, решая те же эмоционально- образные задачи.

Курс повышения квалификации

Курс профессиональной переподготовки

Учитель, преподаватель изобразительного искусства

Курс повышения квалификации

Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:

Выберите категорию: Все категорииАлгебраАнглийский языкАстрономияБиологияВнеурочная деятельностьВсеобщая историяГеографияГеометрияДиректору, завучуДоп. образованиеДошкольное образованиеЕстествознаниеИЗО, МХКИностранные языкиИнформатикаИстория РоссииКлассному руководителюКоррекционное обучениеЛитератураЛитературное чтениеЛогопедия, ДефектологияМатематикаМузыкаНачальные классыНемецкий языкОБЖОбществознаниеОкружающий мирПриродоведениеРелигиоведениеРодная литератураРодной языкРусский языкСоциальному педагогуТехнологияУкраинский языкФизикаФизическая культураФилософияФранцузский языкХимияЧерчениеШкольному психологуЭкологияДругое

Выберите класс: Все классыДошкольники1 класс2 класс3 класс4 класс5 класс6 класс7 класс8 класс9 класс10 класс11 класс

Выберите учебник: Все учебники

Выберите тему: Все темы

также Вы можете выбрать тип материала:

Общая информация

Номер материала: ДВ-076278

Похожие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Презентация по ИЗО на тему «Цвет

Описание презентации по отдельным слайдам:

Цвет – элемент композиционного творчества. Свободные формы: линии и пятна. Урок в 8 классе Муниципальное бюджетное образовательное учреждение Основная общеобразовательная школа №10 г. Выкса Тема: Учитель Редкозубова А.И.

Цвет больше чем любой другой элемент композиции, обращён к нашим чувствам.

Зимний парк… Аллея парка осенью.

Яркие цвета привлекают наше внимание и обостряют восприятие.

Практическая работа Задание №1 Создайте композицию из 2-3 прямоугольников, 3-4 прямых линий и небольшого цветного кружка, который должен стать доминантой в композиции. Задание №2 На белом или чёрном фоне создайте композицию из цветных линий, прямоугольников и кругов. Выполните композицию в тёплой и холодной гамме.

В.Кандинский. Картина с кругом В. Кандинский. Композиция VIII Х. Миро. Рождение мира Х.Миро. Живопись 1933 год

Курс повышения квалификации

Курс профессиональной переподготовки

Учитель, преподаватель изобразительного искусства

Курс повышения квалификации

Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:

Выберите категорию: Все категорииАлгебраАнглийский языкАстрономияБиологияВнеурочная деятельностьВсеобщая историяГеографияГеометрияДиректору, завучуДоп. образованиеДошкольное образованиеЕстествознаниеИЗО, МХКИностранные языкиИнформатикаИстория РоссииКлассному руководителюКоррекционное обучениеЛитератураЛитературное чтениеЛогопедия, ДефектологияМатематикаМузыкаНачальные классыНемецкий языкОБЖОбществознаниеОкружающий мирПриродоведениеРелигиоведениеРодная литератураРодной языкРусский языкСоциальному педагогуТехнологияУкраинский языкФизикаФизическая культураФилософияФранцузский языкХимияЧерчениеШкольному психологуЭкологияДругое

Выберите класс: Все классыДошкольники1 класс2 класс3 класс4 класс5 класс6 класс7 класс8 класс9 класс10 класс11 класс

Выберите учебник: Все учебники

Выберите тему: Все темы

также Вы можете выбрать тип материала:

Общая информация

Номер материала: ДВ-007631

Похожие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

Core Graphics: линии, прямоугольники и градиенты

Обновление примечания : Том Эллиот обновил это руководство для iOS 12, Xcode 10 и Swift 4.2. Рэй Вендерлих написал оригинал.

Это первое из серии руководств Core Graphics , которые раскрывают тайну Core Graphics. Вы изучите API шаг за шагом с помощью практических упражнений, начиная с украшения представления таблиц с помощью Core Graphics.

Core Graphics — действительно крутой API для iOS.Как разработчик, вы можете использовать его для настройки своего пользовательского интерфейса с помощью некоторых действительно изящных эффектов, часто даже без привлечения художника. Все, что связано с 2D-рисованием — например, рисование фигур, их заливка и придание им градиентов — является хорошим кандидатом для использования Core Graphics.

Core Graphics, история которого восходит к самым ранним дням существования OS X, является одним из старейших API-интерфейсов, используемых до сих пор. Возможно, именно поэтому для многих разработчиков iOS Core Graphics поначалу может показаться несколько пугающим: это большой API, и в нем есть множество загвоздок, на которые можно зацепиться.Однако, начиная с Swift 3, API-интерфейсы в стиле C были обновлены, чтобы выглядеть и ощущаться как современные API-интерфейсы Swift, которые вы знаете и любите!

В этом руководстве вы создадите карточное приложение Star Wars Top Trumps, которое состоит из основного представления, содержащего список звездолетов:

… а также подробный обзор каждого звездолета.

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

Возможно, вы захотите пристегнуться; пришло время повеселиться с Core Graphics!

Начало работы

Используйте кнопку Загрузить материалы вверху или внизу этого руководства, чтобы загрузить начальный и готовый проекты. Откройте стартовый проект и быстро осмотритесь. Приложение основано на шаблоне Master-Detail App , предоставленном Xcode. Главный контроллер представления содержит список звездных кораблей, а контроллер подробного представления показывает детали для каждого корабля.

Откройте MasterViewController.swift . В верхней части класса обратите внимание на переменную starships , которая содержит массив типа Starship и переменную dataProvider типа StarshipDataProvider .

Перейти в StarshipDataProvider.swift на Щелкнув с помощью Command StarshipDataProvider и выбрав Перейти к определению . Это простой класс, который читает связанный файл Starships.json и преобразует содержимое в массив Starship .

Вы можете найти определение Starship в Starship.swift . Это простая структура со свойствами общих свойств звездолета.

Затем откройте DetailViewController.swift . В верхней части файла перед определением класса определено перечисление , FieldsToDisplay , которое определяет удобочитаемые заголовки для свойств Starship, которые вы хотите отобразить в качестве случаев в перечислении enum .В этом файле tableView (_: cellForRowAt :) — это просто большой оператор switch для форматирования данных для каждого свойства Starship в правильный формат.

Создайте и запустите приложение.

Целевая страница — это MasterViewController со списком звездолетов из вселенной Звездных войн. Нажмите, чтобы выбрать X-wing , и приложение перейдет к подробному обзору этого корабля, в котором отображается изображение X-wing, за которым следуют различные свойства, такие как его стоимость и скорость полета.

Это полнофункциональное, хотя и довольно скучное приложение. Пора добавить немного шика!

Анализ стиля представления таблицы

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

В главном контроллере представления каждая ячейка:

• Имеет градиент от темно-синего до черного.
• Обведен желтым контуром, начертан врезкой от границ ячейки.

А в подробном виде контроллер:

• Сама таблица имеет градиент от темно-синего до черного.
• Каждая ячейка имеет желтый разделитель, отделяющий ее от соседних ячеек.

Чтобы нарисовать оба этих дизайна, вам просто нужно знать, как рисовать прямоугольники, градиенты и линии с помощью Core Graphics, а это именно то, что вы собираетесь изучить. :]

Привет, Core Graphics!

Хотя в этом руководстве рассматривается использование Core Graphics на iOS, важно знать, что Core Graphics доступна для всех основных платформ Apple, включая MacOS через AppKit, iOS и tvOS через UIKit и на Apple Watch через WatchKit.

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

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

Базовый графический контекст , представленный классом CGContext , определяет , где .Вы сообщаете контексту , какие операции рисования делать. Есть CGContexts для рисования в растровые изображения, рисования в файлы PDF и, как правило, рисования непосредственно в UIView .

В этой аналогии с рисованием контекст Core Graphics представляет холст, на котором рисует художник.

основных графических контекстов — это конечных автоматов . То есть, когда вы устанавливаете, скажем, цвет заливки, вы устанавливаете его для всего холста, и все фигуры, которые вы рисуете, будут иметь тот же цвет заливки, пока вы его не измените.

Каждый UIView имеет свой собственный основной графический контекст. Чтобы нарисовать содержимое UIView с использованием Core Graphics, вы должны написать код рисования в пределах draw (_ :) представления. Это связано с тем, что iOS устанавливает правильный CGContext для рисования в представлении непосредственно перед вызовом draw (_ :) .

Теперь, когда вы понимаете основы использования Core Graphics в UIKit, пора обновить приложение!

Рисование прямоугольников

Для начала создайте новый файл представления, выбрав Новый ▸ Файл… в меню Файл .Выберите Cocoa Touch Class , нажмите Next , а затем задайте имя класса StarshipsListCellBackground . Сделайте его подклассом UIView , затем создайте файл класса. Добавьте следующий код в свой новый класс:

переопределить функцию рисования (_ rect: CGRect) {
  // 1
  guard let context = UIGraphicsGetCurrentContext () else {
    возвращение
  }
  // 2
  context.setFillColor (UIColor.red.cgColor)
  // 3
  контекст.заполнить (границы)
}
 

Разбивка по строкам:

1. Сначала вы получаете текущий CGContext для этого экземпляра UIView , используя UIGraphicsGetCurrentContext () . Помните, что iOS настроила это автоматически до вызова draw (_ :) . Если вы не можете получить контекст по какой-либо причине, вы возвращаетесь из метода раньше.
2. Затем вы устанавливаете цвет заливки в самом контексте.
3. Наконец, вы указываете ему заполнить границы представления.

Как видите, Core Graphics API не содержит метода для прямого рисования формы, залитой цветом. Вместо этого, подобно добавлению краски к конкретной кисти, вы устанавливаете цвет как состояние CGContext , а затем указываете контексту, что рисовать этим цветом отдельно.

Вы также могли заметить, что при вызове setFillColor (_ :) в контексте вы не указали стандартный UIColor . Вместо этого вы должны использовать CGColor , который является основным типом данных, используемым внутри Core Graphics для представления цветов.Очень просто преобразовать UIColor в CGColor , просто обратившись к свойству cgColor любого UIColor .

Показывает вашу новую ячейку

Чтобы увидеть новое представление в действии, откройте MasterViewController.swift . В tableView (_: cellForRowAt :) добавьте следующий код сразу после удаления ячейки в первой строке метода:

if! (cell.backgroundView is StarshipsListCellBackground) {
  ячейка.backgroundView = StarshipsListCellBackground ()
}
    
if! (cell.selectedBackgroundView is StarshipsListCellBackground) {
  cell.selectedBackgroundView = StarshipsListCellBackground ()
}
 

Этот код устанавливает фоновое изображение ячеек в соответствии с вашим новым представлением. Создайте и запустите приложение, и вы увидите красивый, хотя и яркий, красный фон в каждой ячейке.

Удивительно! Теперь вы можете рисовать с помощью Core Graphics. И хотите верьте, хотите нет, но вы уже освоили ряд действительно важных техник: как получить контекст для рисования, как изменить цвет заливки и как заполнить прямоугольники цветом.С его помощью вы можете создать довольно приятный интерфейс.

Но вы собираетесь пойти дальше и узнать об одном из самых полезных методов создания отличного пользовательского интерфейса: градиентах!

Создание новых цветов

Вы собираетесь использовать одни и те же цвета снова и снова в этом проекте, поэтому создайте расширение для UIColor , чтобы сделать их доступными. Перейдите в File ▸ New File… и создайте новый Swift File с именем UIColorExtensions.Свифт . Замените содержимое файла следующим:

импорт UIKit

extension UIColor {
  публичные статические let starwarsYellow =
    UIColor (красный: 250/255, зеленый: 202/255, синий: 56/255, альфа: 1,0)
  публичные статические let starwarsSpaceBlue =
    UIColor (красный: 5/255, зеленый: 10/255, синий: 85/255, альфа: 1.0)
  общедоступные статические пусть starwarsStarshipGrey =
    UIColor (красный: 159/255, зеленый: 150/255, синий: 135/255, альфа: 1.0)
}
 

Этот код определяет три новых цвета, к которым можно получить доступ как к статическим свойствам на UIColor .

Рисование градиентов

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

Выберите File ▸ New ▸ File… и создайте новый Swift File с именем CGContextExtensions.swift . Замените содержимое файла следующим:

импорт UIKit

extension CGContext {
  func drawLinearGradient (
    in rect: CGRect,
    startWith startColor: CGColor,
    finishWith endColor: CGColor
  ) {
    // 1
    пусть colorSpace = CGColorSpaceCreateDeviceRGB ()

    // 2
    пусть местоположения = [0.0, 1.0] как [CGFloat]

    // 3
    let colors = [startColor, endColor] как CFArray

    // 4
    охранник let gradient = CGGradient (
      colorsSpace: colorSpace,
      цвета: цвета,
      местоположения: местоположения
    ) else {
      возвращение
    }
  }
}
 

В этом методе много возможностей:

1. Сначала вы установите правильное цветовое пространство . С цветовыми пространствами можно многое сделать, но вы почти всегда хотите использовать стандартное цветовое пространство RGB, зависящее от устройства, используя CGColorSpaceCreateDeviceRGB .
2. Затем вы настраиваете массив, который отслеживает расположение каждого цвета в пределах диапазона градиента. Значение 0 означает начало градиента, а 1 означает конец градиента.

   Примечание : Вы можете иметь три или более цветов в градиенте, если хотите, и вы можете установить, где каждый цвет начинается в градиенте в массиве, подобном этому. Это полезно для определенных эффектов.

3. После этого вы создаете массив с цветами, которые вы передали в свой метод.Обратите внимание на использование CFArray , а не Array , поскольку вы работаете с API нижнего уровня C.
4. Затем вы создаете свой градиент, инициализируя объект CGGradient , передавая цветовое пространство, массив цветов и местоположения, которые вы ранее указали. Если по какой-либо причине дополнительный инициализатор не работает, вы вернетесь раньше.

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

Стек состояний графики

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

переопределить функцию рисования (_ rect: CGRect) {
  //... получить контекст
     
  context.setFillColor (UIColor.red.cgColor)
  drawBlueCircle (в контексте)
  context.fill (someRect)
}
  
// ... много строк позже
  
func drawBlueCircle (в контексте: CGContext) {
  context.setFillColor (UIColor.blue.cgColor)
  context.addEllipse (in: границы)
  context.drawPath (с использованием: .fill)
}
 

Взглянув на этот код, вы можете подумать, что он будет рисовать красный прямоугольник и синий круг в представлении, но вы ошибаетесь! Вместо этого этот код рисует синий прямоугольник и синий круг — но почему?

Поскольку drawBlueCircle (в :) устанавливает синий цвет заливки в контексте и, поскольку контекст является конечным автоматом, это переопределяет красный цвет заливки, установленный ранее.

Здесь на помощь приходят saveGState () и его партнерский метод restoreGState () )!

Каждый CGContext поддерживает стек состояния графики, содержащий большинство, хотя и не все, аспектов текущей среды рисования. saveGState () помещает копию текущего состояния в стек состояний графики, а затем вы можете использовать restoreGState () для восстановления контекста в это состояние позже и удаления состояния из стека в процессе.

В приведенном выше примере вы должны изменить drawBlueLines (in :) следующим образом:

func drawBlueCircle (в контексте: CGContext) {
  context.saveGState ()
  context.setFillColor (UIColor.blue.cgColor)
  context.addEllipse (in: границы)
  context.drawPath (с использованием: .fill)
  context.restoreGState ()
}
 

Вы можете проверить это сами, открыв RedBluePlayground.playground с помощью кнопки Download Materials вверху или внизу этого руководства.

Завершение градиента

Вооружившись знаниями о стеке состояний графики, пора закончить рисование фонового градиента. Добавьте в конец drawLinearGradient (in: StartingWith: finishWith :) :

// 5
пусть startPoint = CGPoint (x: rect.midX, y: rect.minY)
пусть endPoint = CGPoint (x: rect.midX, y: rect.maxY)
    
// 6
saveGState ()

// 7
addRect (прямоугольник)
клип ()
drawLinearGradient (
  градиент
  начало: startPoint,
  конец: endPoint,
  параметры: CGGradientDrawingOptions ()
)

restoreGState ()
 

5. Вы начинаете с вычисления начальной и конечной точек градиента.Вы устанавливаете это как линию от верхнего среднего до нижнего среднего прямоугольника. К счастью, CGRect содержит некоторые переменные экземпляра, такие как midX и maxY , чтобы сделать это действительно простым.
6. Затем, поскольку вы собираетесь изменить состояние контекста, вы сохраняете его графическое состояние и завершаете метод, восстанавливая его.
7. Наконец, вы рисуете градиент в предоставленном прямоугольнике. drawLinearGradient (_: start: end: options :) — это метод, который фактически рисует градиент, но, если не указано иное, он заполнит градиентом весь контекст, который в вашем случае представляет собой весь вид.Здесь вам нужно только заполнить градиент в предоставленном прямоугольнике. Для этого нужно понимать отсечения .

   Clipping — потрясающая функция в Core Graphics, которая позволяет ограничить рисование произвольной формой. Все, что вам нужно сделать, это добавить фигуру в контекст, но затем вместо того, чтобы заполнять ее, как обычно, вы вызываете clip () в контексте, который затем ограничивает все последующие рисования этой областью.

   Итак, в этом случае вы установите предоставленный прямоугольник в контексте и закрепите перед окончательным вызовом drawLinearGradient (_: start: end: options :) для рисования градиента.

Пора испытать этот метод! Откройте StarshipsListCellBackground.swift и после получения текущего UIGraphicsContext замените код следующим:

пусть backgroundRect = границы
context.drawLinearGradient (
  в: backgroundRect,
  startWith: UIColor.starwarsSpaceBlue.cgColor,
  finishWith: UIColor.black.cgColor
)
 

Создайте и запустите приложение.

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

Исправление темы

Откройте Main.storyboard и выберите представление таблицы в основной сцене . В инспекторе атрибутов установите Separator на None .

Затем выберите панель навигации в сцене Master Navigation Controller и установите для панели навигации Style значение Black и отмените выбор Translucent .Повторите эти действия для панели навигации в сцене Детальный контроллер навигации .

Затем откройте MasterViewController.swift . В конце viewDidLoad () добавьте следующее:

tableView.backgroundColor = .starwarsSpaceBlue
 

Затем в tableView (_: cellForRowAt :) перед возвратом ячейки установите цвет текста:

cell.textLabel! .textColor = .starwarsStarshipGrey
 

Наконец, откройте AppDelegate.swift и в приложении (_: didFinishLaunchingWithOptions :) перед возвратом добавьте следующее:

// Тематика
UINavigationBar.appearance (). TintColor = .starwarsYellow
UINavigationBar.appearance (). BarTintColor = .starwarsSpaceBlue
UINavigationBar.appearance (). TitleTextAttributes =
  [.foregroundColor: UIColor.starwarsStarshipGrey]
 

Создайте и запустите приложение.

Так лучше! Ваш основной вид таблицы начинает выглядеть очень космической эрой.:]

Поглаживающие дорожки

Обводка в Core Graphics означает рисование линии вдоль пути, а не заливку, как вы делали раньше.

Когда Core Graphics обводит контур, он рисует линию обводки на середине точного края контура. Это может вызвать несколько общих проблем.

За пределами границ

Во-первых, если вы рисуете по краю прямоугольника, граница, например, Core Graphics не будет рисовать половину пути обводки по умолчанию.

Почему? Потому что контекст, настроенный для UIView , распространяется только на границы представления. Представьте себе обводку с границей в одну точку по краю вида. Поскольку Core Graphics обводит середину пути, линия будет на половину точки вне границ вида и половину точки внутри границ вида.

Распространенное решение — вставить путь для прямоугольника обводки на половину ширины линии в каждом направлении, чтобы он находился внутри вида.

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

Сглаживание

Во-вторых, вы должны знать об эффектах сглаживания, которые могут повлиять на внешний вид вашей границы. Сглаживание, если вы не знаете, что это такое (даже если вы, возможно, слышали об этом на экране настроек компьютерной игры!), — это метод, используемый движками рендеринга, чтобы избежать появления «неровных» краев и линий при отображении графики. не соответствуют точным физическим пикселям на устройстве.

Возьмем пример границы в одну точку вокруг вида из предыдущего абзаца. Если граница следует за границами вида, Core Graphics попытается нарисовать линию шириной в половину точки по обе стороны от прямоугольника.

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

В следующих наборах снимков экрана левое изображение является дисплеем без сетчатки, среднее изображение — дисплеем сетчатки с масштабом два, а третье изображение — дисплеем сетчатки со шкалой трех.

Для первой диаграммы обратите внимание на то, что изображение 2x не показывает никакого сглаживания, поскольку половина точки по обе стороны от желтого прямоугольника попадает на границу пикселя. Однако в изображениях 1x и 3x происходит сглаживание.

В следующем наборе снимков экрана прямоугольник обводки вставлен на половину точки, так что линия обводки точно совпадает с точечными и, следовательно, пиксельными границами.Обратите внимание на отсутствие артефактов сглаживания.

Добавление границы

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

Вы уже знаете, как легко заполнять прямоугольники. Что ж, гладить их так же легко.

Откройте StarshipsListCellBackground.swift и добавьте следующее в конец розыгрыша (_ :) :

пусть strokeRect = backgroundRect.insetBy (dx: 4.5, dy: 4.5)
context.setStrokeColor (UIColor.starwarsYellow.cgColor)
context.setLineWidth (1)
context.stroke (strokeRect)
 

Здесь вы создаете прямоугольник для обводки, который отступает от фонового прямоугольника на 4,5 точки как по оси x, так и по оси y. Затем вы устанавливаете желтый цвет обводки, ширину линии до одной точки и, наконец, обводите прямоугольник. Создайте и запустите свой проект.

Теперь ваш список звездолетов действительно выглядит так, будто он пришел из далекой-далекой галактики!

Создание макета карты

В то время как ваш главный контроллер представления выглядит модно, контроллер подробного представления все еще нуждается в некоторой модернизации!

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

Создайте новый файл Swift с именем StarshipTableView.swift . Замените сгенерированный код следующим:

импорт UIKit

class StarshipTableView: UITableView {
  переопределить функцию рисования (_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext () else {
      возвращение
    }

    пусть backgroundRect = границы
    context.drawLinearGradient (
      в: backgroundRect,
      startWith: UIColor.starwarsSpaceBlue.cgColor,
      finishWith: UIColor.black.cgColor
    )
  }
}
 

Это должно быть уже знакомо. В методе draw (_ :) вашего нового подкласса табличного представления вы получаете текущий CGContext , затем рисуете градиент в границах представления, начиная с синего вверху и переходя в черный цвет внизу. Просто!

Откройте Main.storyboard и щелкните TableView в сцене Detail .В Инспекторе удостоверений установите класс на свой новый StarshipTableView .

Создайте и запустите приложение, затем коснитесь строки X-wing .

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

Вернитесь в Main.storyboard , выберите FieldCell в Детальной сцене .В инспекторе атрибутов установите для фона значение Clear Color . Затем откройте DetailViewController.swift и в самом низу tableView (_: cellForRowAt :) перед возвратом ячейки добавьте следующее:

cell.textLabel! .textColor = .starwarsStarshipGrey
cell.detailTextLabel! .textColor = .starwarsYellow
 

Это просто устанавливает имя и значение поля ячеек на более подходящие цвета для вашей темы Звездных войн.

Затем, после tableView (_: cellForRowAt :) добавьте следующий метод для стилизации заголовка представления таблицы:

переопределить func tableView (
  _ tableView: UITableView,
  Представление willDisplayHeaderView: UIView,
  Раздел forSection: Int
) {
    view.tintColor = .starwarsYellow
    если позволить header = просмотреть как? UITableViewHeaderFooterView {
      header.textLabel? .textColor = .starwarsSpaceBlue
    }
  }
 

Здесь вы устанавливаете оттенок цвета заголовка представления таблицы на желтый цвет темы, придавая ему желтый фон, а цвет текста — синий.

Линии чертежа

В завершение, вы добавите разделитель к каждой ячейке в подробном представлении. Создайте новый файл Swift , на этот раз с именем YellowSplitterTableViewCell.swift . Замените сгенерированный код следующим:

импорт UIKit

class YellowSplitterTableViewCell: UITableViewCell {
  переопределить функцию рисования (_ rect: CGRect) {
    guard let context = UIGraphicsGetCurrentContext () else {
      возвращение
    }
    
    пусть y = границы.maxY - 0,5
    пусть minX = bounds.minX
    пусть maxX = bounds.maxX

    context.setStrokeColor (UIColor.starwarsYellow.cgColor)
    context.setLineWidth (1.0)
    context.move (в: CGPoint (x: minX, y: y))
    context.addLine (to: CGPoint (x: maxX, y: y))
    context.strokePath ()
  }
}
 

В YellowSplitterTableVIewCell вы используете Core Graphics, чтобы обвести линию внизу границ ячеек. Обратите внимание, что используемое значение y на пол-точки меньше, чем границы представления, чтобы разделитель полностью рисовался внутри ячейки.

Теперь вам нужно нарисовать линию, показывающую разделитель.

Чтобы провести линию между A и B, вы сначала переходите к точке A, в которой Core Graphics ничего не рисует. Затем вы добавляете линию к точке B, которая добавляет линию от точки A к точке B в контексте. Затем вы можете вызвать strokePath () , чтобы обвести линию.

Наконец, снова откройте Main.storyboard и установите класс FieldCell в сцене Detail , чтобы он был вашим вновь созданным YellowSplitterTableViewCell с помощью Инспектора удостоверений.Создайте и запустите свое приложение. Затем откройте подробный вид X-wing. Красивый!

Куда идти дальше?

Вы можете загрузить окончательный проект, используя ссылку Download Materials вверху или внизу этого руководства.

В загрузку также входят две детские площадки. RedBluePlayground.playground содержит пример, изложенный в разделе сохранения / восстановления контекста, а ClippedBorderedView.playground демонстрирует обрезку границы, если она не вставлена.

Кроме того, DemoProject — это полный проект Xcode, который обводит прямоугольник по одноточечной сетке. Этот проект написан на Objective-C, поэтому вы можете запустить его без изменений на устройствах без Retina, таких как iPad 2, для которых требуется iOS 9, чтобы самому увидеть эффекты сглаживания. Но не паникуйте! Это легко понять, когда вы знаете Core Graphics Swift API. :]

На этом этапе вы должны быть знакомы с некоторыми довольно крутыми и мощными методами работы с Core Graphics: заливкой и обводкой прямоугольников, рисованием линий и градиентов, а также обрезкой контуров.Не говоря уже о том, что ваше представление таблицы теперь выглядит довольно круто. Поздравляю!

Если это руководство было немного трудным для понимания или вы хотите обязательно охватить свои основы, посмотрите серию видеороликов «Начало работы с основной графикой».

Если вы ищете что-то более сложное, взгляните на курс Intermediate Core Graphics.

А если вы еще не чувствуете, что можете пройти полный курс, попробуйте серию статей о базовой графике, где вы узнаете, как нарисовать все приложение, включая графики, с нуля с помощью Core Graphics!

Плюс на сайте есть еще много руководств по Core Graphics, все они недавно обновлены для Xcode 10.

Если у вас есть какие-либо вопросы или комментарии, присоединяйтесь к обсуждению на форуме ниже.

raywenderlich.com Еженедельно

Информационный бюллетень raywenderlich.com — это самый простой способ оставаться в курсе всего, что вам нужно знать как разработчику мобильных приложений.

Получайте еженедельный дайджест наших руководств и курсов, а в качестве бонуса получите бесплатный углубленный курс по электронной почте!

линий, прямоугольники, стоковые иллюстрации — 11419 линий, прямоугольники, стоковые иллюстрации, векторы и клипарт