{"id":279978,"date":"2016-10-26T16:25:02","date_gmt":"2016-10-26T12:25:01","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=279978"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=279978","title":{"rendered":"Macaw"},"content":{"rendered":"<p>\u041f\u0440\u0438\u0432\u0435\u0442 \u0425\u0430\u0431\u0440,<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0442\u043e\u043d\u043d\u044b \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 <a href=\"https:\/\/itunes.apple.com\/us\/app\/fresh-air-beautiful-personalized\/id933439687?mt=8\">\u0445\u0438\u0442\u0440\u044b\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432<\/a> \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f <a href=\"https:\/\/itunes.apple.com\/us\/app\/portfolio-finance-news-stock\/id974217998?mt=8\">\u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430\u043c\u0438 \u0430\u043a\u0446\u0438\u0439<\/a>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435, \u043a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0441 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 iOS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443, \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/exyte\/macaw\">Macaw<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0432 \u0432\u0438\u0434\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Scene_graph\">\u0441\u0446\u0435\u043d\u044b<\/a> \u0438 \u0434\u0430\u0436\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e? \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c \u0432\u0430\u0441 \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u043c\u0438 Macaw \u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" width=\"475\"  src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d55\/25a\/541\/d5525a541b53a93399971f5b095ced3a.png\" alt=\"image\"\/><\/div>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h1 id=\"macawview\">MacawView<\/h1>\n<p>  <\/p>\n<p><code>MacawView<\/code> \u2013 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 Macaw \u0432 \u043c\u0438\u0440\u0435 Cocoa. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 Macaw, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043b\u0430\u0441\u0441, \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0442 MacawView \u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 MacawView \u0443\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 <code>UIView<\/code>, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 Cocoa. \u0412\u043e\u0442 \u0442\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 &quot;Hello, World!&quot; \u043d\u0430 Macaw:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">class MyView: MacawView {      required init?(coder aDecoder: NSCoder) {         let text = Text(text: &quot;Hello, World!&quot;, place: .move(dx: 145, dy: 100))         super.init(node: text, coder: aDecoder)     } }<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/eaa\/085\/e4b\/eaa085e4b014fc563a69f62538da808e.png\" alt=\"image\"\/>  <\/p>\n<h1 id=\"scena\">\u0421\u0446\u0435\u043d\u0430<\/h1>\n<p>  <\/p>\n<p>Macaw \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0432 \u0432\u0438\u0434\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0422\u0430\u043a\u0430\u044f \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%93%D1%80%D0%B0%D1%84_%D1%81%D1%86%D0%B5%D0%BD%D1%8B\">\u0433\u0440\u0430\u0444 \u0441\u0446\u0435\u043d\u044b<\/a> \u0438\u043b\u0438 \u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0446\u0435\u043d\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441\u0446\u0435\u043d\u044b.<\/p>\n<p>  <\/p>\n<h2 id=\"shape\">Shape<\/h2>\n<p>  <\/p>\n<p>Shape \u2013 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0446\u0435\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0444\u0438\u0433\u0443\u0440\u0443. \u0423 \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>form<\/code> \u2013 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0447\u0435\u043a, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0435\u0435 \u0444\u043e\u0440\u043c\u0443 \u0444\u0438\u0433\u0443\u0440\u044b. \u042d\u0442\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c, \u0447\u0442\u043e \u0445\u043e\u0442\u0438\u043c \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c: \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u043a\u0440\u0443\u0433, \u043f\u043e\u043b\u0438\u0433\u043e\u043d \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0435.<\/li>\n<li><code>fill<\/code> \u2013 \u0446\u0432\u0435\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0438\u0433\u0443\u0440\u044b<\/li>\n<li><code>stroke<\/code> \u2013 \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043e\u043a\u0440\u0443\u0433 \u0444\u0438\u0433\u0443\u0440\u044b<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">class MyView: MacawView {      required init?(coder aDecoder: NSCoder) {         let shape = Shape(form: Rect(x: 100, y: 75, w: 175, h: 30),                           fill: Color(val: 0xfcc07c),                           stroke: Stroke(fill: Color(val: 0xff9e4f), width: 2))         super.init(node: shape, coder: aDecoder)     } }<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/6ec\/cd0\/fe7\/6eccd0fe7ecf09fa10e36db6247b38ac.png\" alt=\"image\"\/>  <\/p>\n<p>Macaw \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e <a href=\"https:\/\/developer.apple.com\/library\/content\/documentation\/General\/Conceptual\/Devpedia-CocoaApp\/CoordinateSystem.html\">\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 Cocoa<\/a>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a 175&#215;30 \u0442\u043e\u0447\u0435\u043a \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 iPhone 6\/6s (\u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e 375 \u0442\u043e\u0447\u0435\u043a). \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u043a\u0440\u0430\u043d\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 <code>MacawView<\/code> \u0438 \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e autolayout \u0432 Cocoa.<\/li>\n<li>\u0421\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0446\u0435\u043d\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043a\u0440\u0430\u043d\u0430. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u043b\u044e\u0431\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 Macaw \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b:<\/p>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ab1\/6b7\/14b\/ab16b714bc8f32d6dc6bc0b759aa6f8b.png\" alt=\"image\"\/>  <\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u0432 Macaw \u0435\u0441\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>Path<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u044b \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u0432\u0438\u0434\u0435 \u043d\u0430\u0431\u043e\u0440\u0430 \u043a\u0440\u0438\u0432\u044b\u0445.<\/p>\n<p>  <\/p>\n<p>\u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u0443. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let shape = Shape(     form: RoundRect(         rect: Rect(x: 100, y: 75, w: 175, h: 30),         rx: 5, ry: 5),     fill: Color(val: 0xfcc07c))<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/070\/653\/18e\/07065318e6dd04b41adf7d56f8d0134c.png\" alt=\"image\"\/>  <\/p>\n<p>\u0422\u0430\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0446\u0435\u043d\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c. \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0446\u0435\u043d\u0443, \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u044f \u0435\u0451 \u043d\u0430 \u0434\u0435\u0440\u0435\u0432\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432. Macaw \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0446\u0435\u043d\u0443 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let shape = Rect(x: 100, y: 75, w: 175, h: 30).round(r: 5).fill(with: Color(val: 0xfcc07c))<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b \u0441\u0430\u043c\u0438 \u0440\u0435\u0448\u0430\u0435\u0442\u0435, \u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0430\u0448 \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c.<\/p>\n<p>  <\/p>\n<h2 id=\"text\">Text<\/h2>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0446\u0435\u043d\u044b \u2014 \u044d\u0442\u043e \u0442\u0435\u043a\u0441\u0442. \u0412\u043e\u0442 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>text<\/code> \u2013 \u0442\u0435\u043a\u0441\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/li>\n<li><code>fill<\/code> \u2013 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430<\/li>\n<li><code>font<\/code> \u2013 \u0438\u043c\u044f \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430<\/li>\n<li><code>align<\/code>\/<code>baseline<\/code> \u2014 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0435 \u0437\u0430 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430<\/li>\n<\/ul>\n<p>  <\/p>\n<pre><code class=\"javascript\">class MyView: MacawView {      required init?(coder aDecoder: NSCoder) {         let text = Text(text: &quot;Sample&quot;,                         font: Font(name: &quot;Serif&quot;, size: 72),                         fill: Color.blue)         super.init(node: text, coder: aDecoder)     } }<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/3d7\/ca2\/aa2\/3d7ca2aa207980cd5b601a70701d97d4.png\" alt=\"image\"\/>   <\/p>\n<p>\u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0443 \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u043b\u044f \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 <code>Shape<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0446\u0435\u043d\u044b \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>place<\/code> \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0446\u0435\u043d\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440. \u041c\u044b \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u044d\u0442\u043e\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u043f\u043e\u0437\u0434\u043d\u0435\u0435, \u0430 \u043f\u043e\u043a\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">text.place = .move(dx: 100, dy: 75)<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/330\/b13\/e7d\/330b13e7de5ce506cfb6ac2e70fc3a1b.png\" alt=\"image\"\/>  <\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u0435\u043a\u0441\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430. \u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>align<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">text.place = .move(dx: 375 \/ 2, dy: 75) text.align = .mid<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/fb2\/792\/778\/fb2792778283795bdc68c009869fa567.png\" alt=\"image\"\/>  <\/p>\n<p>\u0414\u043b\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>baseline<\/code>.<\/p>\n<p>  <\/p>\n<h2 id=\"group\">Group<\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0433\u0440\u0443\u043f\u043f\u044b \u2013 \u044d\u0442\u043e <code>contents<\/code>: \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0433\u0440\u0443\u043f\u043f\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">class MyView: MacawView {      required init?(coder aDecoder: NSCoder) {         let shape = Shape(             form: Rect(x: -100, y: -15, w: 200, h: 30).round(r: 3),             fill: Color(val: 0xff9e4f),             place: .move(dx: 375 \/ 2, dy: 75))         let text = Text(             text: &quot;Show&quot;,             font: Font(name: &quot;Serif&quot;, size: 21),             fill: Color.white,             align: .mid,             baseline: .mid,             place: .move(dx: 375 \/ 2, dy: 75))         let group = Group(contents: [shape, text])         super.init(node: group, coder: aDecoder)     } }<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/350\/9e6\/5de\/3509e65de9e1221c115bac83beb23a62.png\" alt=\"image\"\/>  <\/p>\n<p>\u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0446\u0435\u043d\u0442\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u043b \u0441 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 (0, 0), \u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u044d\u0442\u0443 \u0442\u043e\u0447\u043a\u0443 \u0432 \u0446\u0435\u043d\u0442\u0440 \u044d\u043a\u0440\u0430\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>.move(dx: 375 \/ 2, dy: 75)<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e, \u043d\u0430\u043c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0432\u0435\u0434\u044c \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u0430\u043c\u0443 \u0433\u0440\u0443\u043f\u043f\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">class MyView: MacawView {      required init?(coder aDecoder: NSCoder) {         let shape = Shape(             form: Rect(x: -100, y: -15, w: 200, h: 30).round(r: 5),             fill: Color(val: 0xff9e4f))         let text = Text(             text: &quot;Show&quot;,             font: Font(name: &quot;Serif&quot;, size: 21),             fill: Color.white,             align: .mid,             baseline: .mid)         let group = Group(contents: [shape, text], place: .move(dx: 375 \/ 2, dy: 75))         super.init(node: group, coder: aDecoder)     } }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"image\">Image<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043d\u0430\u0448\u0435\u043c \u0430\u0440\u0441\u0435\u043d\u0430\u043b\u0435 \u2014 \u044d\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0423 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>src<\/code> \u2013 \u043f\u0443\u0442\u044c \u0434\u043e \u0444\u0430\u0439\u043b\u0430<\/li>\n<li><code>w<\/code>\/<code>h<\/code> \u2013 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430\/\u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/li>\n<li><code>xAlign<\/code>\/<code>yAlign<\/code>\/<code>aspectRatio<\/code> \u2013 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043d\u0430\u0448\u0443 \u0441\u0446\u0435\u043d\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let image = Image(src: &quot;charts.png&quot;, w: 30, place: .move(dx: -55, dy: -15)) let group = Group(contents: [shape, text, image], place: .move(dx: 375 \/ 2, dy: 75))<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/944\/ef4\/953\/944ef4953b2bf7827fa8cd81c7543699.png\" alt=\"image\"\/>  <\/p>\n<p>\u041f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0432\u044b\u0441\u043e\u0442\u0430 \u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u0431\u0435\u0440\u0443\u0442\u0441\u044f \u0438\u0437 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u0442\u043e\u0433\u0434\u0430 \u0432\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044f\u043c\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"cveta-i-gradienty\">\u0426\u0432\u0435\u0442\u0430 \u0438 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/h2>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0432\u044b\u0448\u0435 \u043c\u044b \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let color1 = Color.blue let color2 = Color(val: 0xfcc07c)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043a\u043b\u0430\u0441\u0441\u0435 <code>Color<\/code> \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let color3 = Color.rgb(r: 123, g: 17, b: 199) let color4 = Color.rgba(r: 46, g: 142, b: 17, a: 0.2)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 Macaw \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0435 \u0438 \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 <code>fill<\/code>\/<code>stroke<\/code> \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0446\u0435\u043d\u044b. \u041a\u0430\u0436\u0434\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0446\u0432\u0435\u0442\u043e\u0432 \u0441\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f\u043c\u0438. \u041f\u0440\u0438\u043c\u0435\u0440 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let fill = LinearGradient(     \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0438\u0437 \u0442\u043e\u0447\u043a\u0438 (x1, y1) \u0432 \u0442\u043e\u0447\u043a\u0443 (x2, y2)     \/\/ \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437     x1: 0, y1: 0, x2: 0, y2: 1,     \/\/ \u0435\u0441\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 userSpace \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0432 true, \u0442\u043e \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430     \/\/ \u0438\u043d\u0430\u0447\u0435, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u0433\u0434\u0435      \/\/ (0,0) - \u044d\u0442\u043e \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043b\u0435\u0432\u044b\u0439 \u0443\u0433\u043e\u043b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430     \/\/ (1,1) - \u044d\u0442\u043e \u043d\u0438\u0436\u043d\u0438\u0439 \u043f\u0440\u0430\u0432\u044b\u0439 \u0443\u0433\u043e\u043b \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430     userSpace: false,     stops: [         \/\/ \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0439 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 0 (\u0441\u0442\u0430\u0440\u0442) \u0438 1 (\u0444\u0438\u043d\u0438\u0448)         Stop(offset: 0, color: Color(val: 0xfcc07c)),         Stop(offset: 1, color: Color(val: 0xfc7600))])<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u044b. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043d\u0430\u0448 \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let fill = LinearGradient(degree: 90, from: Color(val: 0xfcc07c), to: Color(val: 0xfc7600))<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u0442\u0441\u0447\u0435\u0442 \u0432\u0441\u0435\u0445 \u0443\u0433\u043b\u043e\u0432 \u0432 Macaw \u0438\u0434\u0435\u0442 \u043f\u043e \u0447\u0430\u0441\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043a\u0435 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 3 \u0447\u0430\u0441\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 90 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432 \u2013 \u044d\u0442\u043e \u043a\u0430\u043a \u0440\u0430\u0437 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437.<\/p>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/989\/7a1\/25c\/9897a125c1c6e4b06316fea66916fed5.png\" alt=\"image\"\/>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u043c \u043d\u0430\u0448\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let shape = Shape(     form: Rect(x: -100, y: -15, w: 200, h: 30).round(r: 5),     fill: LinearGradient(degree: 90, from: Color(val: 0xfcc07c), to: Color(val: 0xfc7600)),     stroke: Stroke(fill: Color(val: 0xff9e4f), width: 1))<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/260\/286\/5a6\/2602865a671b8ec21f30c79cff3de2b5.png\" alt=\"image\"\/>  <\/p>\n<h1 id=\"sobytiya\">\u0421\u043e\u0431\u044b\u0442\u0438\u044f<\/h1>\n<p>  <\/p>\n<p>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u043e \u0441\u0446\u0435\u043d\u043e\u0439. Macaw \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043a\u0430\u043a <code>tap<\/code>, <code>rotate<\/code> \u0438 <code>pan<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 <code>init<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">_ = shape.onTap.subscribe(onNext: { event in text.fill = Color.maroon })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a\u043b\u0438\u043a\u043d\u0435\u0442 \u043f\u043e \u043a\u043d\u043e\u043f\u043a\u0435, \u043e\u043d\u0430 \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u043d\u0430 \u0442\u0451\u043c\u043d\u043e-\u0431\u043e\u0440\u0434\u043e\u0432\u044b\u0439.<\/p>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/766\/221\/2c4\/7662212c4664d8e9ff643bd8e4ef7ec7.png\" alt=\"image\"\/>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439 Macaw \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043c\u043e\u0449\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/ReactiveX\/RxSwift\">RxSwift<\/a>. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>subscribe<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b <code>Disposable<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435\u043c\u0438 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f\u043c\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438 \u0444\u0438\u0433\u0443\u0440\u044b, \u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>_ =<\/code> \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043d\u0430\u0448 \u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435, \u0447\u0442\u043e \u043a\u043b\u0438\u043a \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u042d\u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043a\u043b\u0438\u043a \u043d\u0430 \u0444\u0438\u0433\u0443\u0440\u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0447\u0438\u043d\u0438\u0442\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0435\u0451 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u041e\u0434\u043d\u0430\u043a\u043e, \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>opaque<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let text = Text(     text: &quot;Show&quot;, font: Font(name: &quot;Serif&quot;, size: 21),     fill: Color.white, align: .mid, baseline: .mid,     place: .move(dx: 15, dy: 0), opaque: false)  let image = Image(src: &quot;charts.png&quot;, w: 30, place: .move(dx: -40, dy: -15), opaque: false)<\/code><\/pre>\n<p>  <\/p>\n<h1 id=\"transformaciya\">\u0422\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f<\/h1>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e place \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u0441\u0446\u0435\u043d\u0435. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0442\u0440\u0438\u0446\u0435\u0439 \u0430\u0444\u0444\u0438\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0439 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0442\u043e\u0447\u043a\u0438 \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0432 \u0434\u0440\u0443\u0433\u0443\u044e. \u041f\u043e \u0441\u0443\u0442\u0438, \u043a\u043b\u0430\u0441\u0441 Transform \u0432 Macaw \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 <a href=\"https:\/\/developer.apple.com\/reference\/coregraphics\/1666405-cgaffinetransform\">CGAffineTransform<\/a> \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 Core Graphics, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043d\u0430 \u043d\u0451\u043c \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f. \u0414\u043b\u044f \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438:<\/p>\n<p>  <img decoding=\"async\" width=\"460\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/0f9\/ddc\/cf1\/0f9ddccf1f169178a73d73a8ddcf8ec8.gif\" alt=\"image\"\/><\/p>\n<h1 id=\"diagrammy\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/h1>\n<p>  <\/p>\n<p>\u0412 Macaw \u043d\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432 \u0438 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0445 \u043a\u0440\u0430\u0439\u043d\u0435 \u043b\u0435\u0433\u043a\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0432\u0435\u0434\u0451\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u043b\u0430\u043b\u0438 \u0432\u0441\u0451 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f. \u0412\u043e\u0442 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">class MyView: MacawView {      required init?(coder aDecoder: NSCoder) {         let button = MyView.createButton()         super.init(node: Group(contents: [button]), coder: aDecoder)     }      private static func createButton() -&gt; Group {         let shape = Shape(             form: Rect(x: -100, y: -15, w: 200, h: 30).round(r: 5),             fill: LinearGradient(degree: 90, from: Color(val: 0xfcc07c), to: Color(val: 0xfc7600)),             stroke: Stroke(fill: Color(val: 0xff9e4f), width: 1))          let text = Text(             text: &quot;Show&quot;, font: Font(name: &quot;Serif&quot;, size: 21),             fill: Color.white, align: .mid, baseline: .mid,             place: .move(dx: 15, dy: 0), opaque: false)          let image = Image(src: &quot;charts.png&quot;, w: 30, place: .move(dx: -40, dy: -15), opaque: false)          return Group(contents: [shape, text, image], place: .move(dx: 375 \/ 2, dy: 75))     } }<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/260\/286\/5a6\/2602865a671b8ec21f30c79cff3de2b5.png\" alt=\"image\"\/>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0441\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435 \u043d\u0430\u0448\u0435\u0439 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">required init?(coder aDecoder: NSCoder) {     let button = MyView.createButton()     let chart = MyView.createChart(button.contents[0])     super.init(node: Group(contents: [button, chart]), coder: aDecoder) }  private static func createChart(_ button: Node) -&gt; Group {     var items: [Node] = []     for i in 1...6 {         let y = 200 - Double(i) * 30.0         items.append(Line(x1: -5, y1: y, x2: 275, y2: y).stroke(fill: Color(val: 0xF0F0F0)))         items.append(Text(text: &quot;\\(i*30)&quot;, align: .max, baseline: .mid, place: .move(dx: -10, dy: y)))     }     items.append(createBars(button))     items.append(Line(x1: 0, y1: 200, x2: 275, y2: 200).stroke())     items.append(Line(x1: 0, y1: 0, x2: 0, y2: 200).stroke())     return Group(contents: items, place: .move(dx: 50, dy: 200)) }  private static func createBars(_ button: Node) -&gt; Group {     \/\/ \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443     return Group() }<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a86\/aa5\/329\/a86aa5329c6692dd9786e46e3ac282ae.png\" alt=\"image\"\/>  <\/p>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0440\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0430\u043c\u0443 \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"ruby\">static let data: [Double] = [101, 142, 66, 178, 92]     static let palette = [0xf08c00, 0xbf1a04, 0xffd505, 0x8fcc16, 0xd1aae3].map { val in Color(val: val)}  private static func createBars(_ button: Node) -&gt; Group {     var items: [Node] = []     for (i, item) in data.enumerated() {         let bar = Shape(             form: Rect(x: Double(i) * 50 + 25, y: 0, w: 30, h: item),             fill: LinearGradient(degree: 90, from: palette[i], to: palette[i].with(a: 0.3)),             place: .move(dx: 0, dy: -data[i]))         items.append(bar)     }     return Group(contents: items, place: .move(dx: 0, dy: 200)) }<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d55\/25a\/541\/d5525a541b53a93399971f5b095ced3a.png\" alt=\"image\"\/>  <\/p>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438, \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 <code>createBars<\/code> \u043c\u044b \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043a\u0440\u0430\u0441\u0438\u0432\u0443\u044e \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u0443, \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u043c\u0435\u043d\u044c\u0448\u0435 10 \u0441\u0442\u0440\u043e\u043a \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0433\u043e, \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430! \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u044d\u0442\u0443 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0432 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<h1 id=\"animaciya\">\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/h1>\n<p>  <\/p>\n<p>\u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f Macaw, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u2013 \u044d\u0442\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u0446\u0435\u043d\u044b \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0415\u0441\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0446\u0435\u043d\u044b, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u0442\u0430\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043a\u0430\u043a <code>opacity<\/code> \u0438\u043b\u0438 <code>place<\/code>, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0435\u0449\u0451 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>opacityVar<\/code> \u0438 <code>placeVar<\/code>. \u042d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u0430\u043a \u0440\u0430\u0437 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>opacity<\/code>, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>opacityVar<\/code>. \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u2013 \u044d\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>animate<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"ruby\">node.opacityVar.animate(to: 0)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430\u0447\u043d\u0451\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>node<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0438\u0441\u0447\u0435\u0437\u0430\u0442\u044c \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0439 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0451\u0442 \u0432\u043e\u0432\u0441\u0435.<\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043a\u0430\u043a \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 \u0442\u0440\u0451\u0445 \u0447\u0430\u0441\u0442\u0435\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0410\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e<\/li>\n<li>\u0412\u0440\u0435\u043c\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u043d\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0432\u043d\u043e \u043e\u0434\u043d\u043e\u0439 \u0441\u0435\u043a\u0443\u043d\u0434\u0435<\/li>\n<li>\u0418 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0448\u0430\u0433\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<p>Macaw \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0430\u043c\u043e\u043c\u0443, \u043e\u0434\u043d\u0430\u043a\u043e \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0440\u0435\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439:<\/p>\n<p>  <\/p>\n<ul>\n<li><code>from<\/code> \u2013 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e, \u0442\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/li>\n<li><code>to<\/code> \u2013 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/li>\n<li><code>easing<\/code> \u2013 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043a \u043d\u0430\u0448\u0435\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435. \u0421\u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0441\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0433\u0438\u0441\u0442\u043e\u0433\u0440\u0430\u043c\u043c\u044b <code>opacity: 0<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u0438\u0445 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043d\u0430\u0448\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"ruby\">_ = button.onTap.subscribe(onNext: { _ in bar.opacityVar.animate(to: 1.0) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438:<\/p>\n<p>  <img decoding=\"async\" width=\"460\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/663\/aa9\/481\/663aa948107fca9cdcf6e9b8fec78415.gif\" alt=\"image\"\/>  <\/p>\n<p>\u0412\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u043e\u0439 \u043c\u044b \u043f\u0440\u0438\u0432\u0435\u043b\u0438 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435! \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442: \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u0430\u0448\u0438 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0440\u0430\u0441\u0442\u0430\u0442\u044c \u0438\u0437 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043d\u043e\u0439 \u043e\u0441\u0438 X. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0442 \u043d\u0443\u043b\u044f \u0434\u043e \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let bar = Shape(     form: Rect(x: Double(i) * 50 + 25, y: 0, w: 30, h: item),     fill: LinearGradient(degree: 90, from: palette[i], to: palette[i].with(a: 0.3)),     \/\/ \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c y \u0434\u043e 0     place: .scale(sx: 1, sy: 0)) items.append(bar) _ = button.onTap.subscribe(onNext: { _ in     \/\/ \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c \u0434\u043e \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f     bar.placeVar.animate(to: .move(dx: 0, dy: -data[i])) })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u043e\u043b\u0431\u0446\u044b \u0441 \u0440\u0430\u0437\u043d\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>delay<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"ruby\">bar.placeVar.animate(to: .move(dx: 0, dy: -data[i]), delay: Double(i) * 0.1)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0443\u0430\u043b\u044f! \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 Show \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u0435:<\/p>\n<p>  <img decoding=\"async\" width=\"460\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/9a6\/75f\/619\/9a675f619614a8965491fdb25174072f.gif\" alt=\"image\"\/><\/p>\n<h1 id=\"svg\">SVG<\/h1>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435, \u0432 Macaw \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SVG. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>SVGParser.parse<\/code> \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c SVG \u0444\u0430\u0439\u043b \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0446\u0435\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0438\u043b\u0438 \u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 MacawView.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">class SVGTigerView: MacawView {     required init?(coder aDecoder: NSCoder) {         super.init(node: SVGParser.parse(path: &quot;tiger&quot;), coder: aDecoder)     } }<\/code><\/pre>\n<p>  <img decoding=\"async\" width=\"475\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/7e7\/fb8\/aed\/7e7fb8aed5c39f6e3a3c5633cfa07958.png\" alt=\"image\"\/>  <\/p>\n<p>\u0423\u0441\u0432\u043e\u0438\u0432 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 Macaw, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u043e\u0432 \u043d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>  <img decoding=\"async\" width=\"600\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f62\/e79\/463\/f62e79463663b7ce51e30e5ad9b6614c.gif\" alt=\"image\"\/><\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 <a href=\"https:\/\/github.com\/exyte\/macaw\">github<\/a>. \u041c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043d\u0430\u0434 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u0438 \u043d\u043e\u0432\u044b\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438, \u0436\u0434\u0438\u0442\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439!<\/p>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/313630\/\"> https:\/\/habrahabr.ru\/post\/313630\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u0438\u0432\u0435\u0442 \u0425\u0430\u0431\u0440,<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0442\u043e\u043d\u043d\u044b \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 <a href=\"https:\/\/itunes.apple.com\/us\/app\/fresh-air-beautiful-personalized\/id933439687?mt=8\">\u0445\u0438\u0442\u0440\u044b\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432<\/a> \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f <a href=\"https:\/\/itunes.apple.com\/us\/app\/portfolio-finance-news-stock\/id974217998?mt=8\">\u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430\u043c\u0438 \u0430\u043a\u0446\u0438\u0439<\/a>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435, \u043a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n<p>  <\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0441 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043c\u044b \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 iOS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0427\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0443, \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/exyte\/macaw\">Macaw<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0432 \u0432\u0438\u0434\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Scene_graph\">\u0441\u0446\u0435\u043d\u044b<\/a> \u0438 \u0434\u0430\u0436\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e? \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c \u0432\u0430\u0441 \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\u0438 \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u043c\u0438 Macaw \u0438 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0443 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" width=\"475\"  src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d55\/25a\/541\/d5525a541b53a93399971f5b095ced3a.png\" alt=\"image\"\/><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-279978","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/279978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=279978"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/279978\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=279978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=279978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=279978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}