Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. iOS SDK
Code

Ўвядзенне ў Quartz 2D

by
Difficulty:BeginnerLength:LongLanguages:

Belarusian (беларуская мова) 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, якiя перадаюцца ў якасці параметру.

Каб маляваць на экране iOS, вы павінны стварыць падклас для UIView і перавызначыць яго метад drawRect(_:). Ўнутры метаду drawRect (_:) вы можаце стварыць любы карыстацкі малюнак. Ніколі не выклікайце метад 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: Даданне прадстаўлення і налада класа

Адкрыйце гысторыю праекта, затым адкрыйце Object Library справа.  У поле пошуку унізе увядзіце "UIView" каб адфільтраваць аб'ектаў, якія нам не патрэбныя.

Show Object Library

Перацягнуць асобнік UIView на кантролер прадстаўлення. Выбраўшы предствление адкрыйце Identity Inspector справа і зменіце назву класа, на тое, якое мы выкарыстоўвалі для падкласа.

Set Class on View

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

2. Пачатковы праект

Каб мы пачалі хутка, я падрыхтаваў стартавы праект, у якім ёсць усё прадстаўлення, яны падлучаныя і гатовыя да выкарыстання.  UIView падкласы названыя як каманда малявання, якую мы будзем вывучаць. Напрыклад, калі мы будзем вывучаць лініі, адпаведны клас будзе называцца DrawLinesView.

Вы можаце спампаваць стартавы праект на GitHub. На наступным этапе мы пачнем пісаць код.

3. Атрымліваем спасылку на графічны кантэкст

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

Мы атрымліваем тып празрыстасці, CGContextRef, і перадаем сontext ў функцыі C для выканання карыстацкага малюнка.  Цяпер, калі мы ведаем, як атрымаць спасылку на графічны кантэкст, мы можам пачаць вывучэнне каманд малявання.

4. Малюем лінію

Калі вы загрузілі стартавы праект, адкрыйце DrawLineView.swift і дадайце наступнае ў метад drawRect(_:).

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

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

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

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

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

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

5. Малюем прямоугольник

Адкрыйце DrawRectangleView.swift і дадайце наступны пасля drawRect(_:) метад. Вы павінны быць знаёмыя з першымі двума радкамі.

Функцыя CGRectMake(_:_:_:_:) з'яўляецца часткай CGGeometry і забяспечвае просты спосаб стварэння структуры CGRect. Як вынікае з яго назвы, CGRect ўяўляе сабой структуру, якая ўтрымлівае месцазнаходжанне і памеры прамавугольніка. CGRect мае два поля, пачатак і памер, якія называюцца CGPoint і CGSizer адпаведна. Калі вы не знаёмыя з гэтымі тыпамі дадзеных, прачытайце падрабязней у інструкцыі 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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.