{"id":453443,"date":"2025-03-26T21:00:30","date_gmt":"2025-03-26T21:00:30","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=453443"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=453443","title":{"rendered":"<span>\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 QML<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p><strong><em>Qt Quick<\/em><\/strong> \u0438 <strong><em>QML<\/em><\/strong> &#8212; \u043c\u043e\u0449\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u041d\u043e \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043c\u043e\u0436\u0435\u0442 \u0441\u0431\u0438\u0442\u044c \u0441 \u0442\u043e\u043b\u043a\u0443. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u0441\u0435\u0445, \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u043c\u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 <strong><em>QML<\/em><\/strong> \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u0440\u0443\u0433\u0430.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0431\u0443\u0434\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 <strong><em>QtCreator<\/em><\/strong>.<\/p>\n<p>\u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0432 <a href=\"https:\/\/gitverse.ru\/kipitix\/circles_on_qml\/content\/master\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<h2>\u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f<\/h2>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c:<\/p>\n<ul>\n<li>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u043c\u043e\u044f \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043e\u0446\u0435\u043d\u043a\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 <strong><em>QtCreator<\/em><\/strong> \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 <strong><em>Design<\/em><\/strong><\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/p>\n<\/li>\n<\/ul>\n<h2>\u041e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043e\u0444\u0442: \u041e\u0421 <strong><em>Ubuntu 24.04<\/em><\/strong>, <strong><em>Qt 6.8.2<\/em><\/strong>, <strong><em>QtCreator 16.0.0<\/em><\/strong>.<\/p>\n<h2>\u0421\u0431\u043e\u0440\u043a\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u044f QML \u0441 &#171;Circles&#187;<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432 <strong><em>QtCreator<\/em><\/strong>, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c <strong><em>QML \u043c\u043e\u0434\u0443\u043b\u044c<\/em><\/strong>.<\/p>\n<p>\u0412 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043e\u043d \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <strong>src\/circles<\/strong>.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u043e\u0434\u0443\u043b\u044f \u0432 <strong><em>QtCreator<\/em><\/strong> \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441 <strong><em>QML<\/em><\/strong> \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435\u043c <strong><em>Qt<\/em><\/strong>. \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0443\u0442\u0438 \u0434\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 &#8212; &#171;<strong>~\/Qt\/6.8.2\/gcc_64\/qml\/&#187;<\/strong>.<\/p>\n<p>\u0414\u043b\u044f \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 <strong><em>CMake<\/em><\/strong> \u043c\u043e\u0434\u0443\u043b\u044f \u0441\u0435\u043a\u0446\u0438\u044e <strong>install<\/strong>.<\/p>\n<details class=\"spoiler\">\n<summary>CMakeLists.txt QML \u043c\u043e\u0434\u0443\u043b\u044f Circles<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">cmake_minimum_required(VERSION 3.16)  project(circles VERSION 0.1 LANGUAGES CXX)  set(CMAKE_CXX_STANDARD_REQUIRED ON)  find_package(Qt6 REQUIRED COMPONENTS Quick Core5Compat ShaderTools)  qt_standard_project_setup(REQUIRES 6.5)  qt6_add_qml_module(Circles     URI Circles     VERSION 1.0     QML_FILES         Circle1.qml         Circle2.qml         Circle3.qml         Circle4.qml         Circle5.qml     RESOURCES         circle_fill.png         circle_border.png     SOURCES         circle6.h         circle6.cpp         circle7.h         circle7.cpp )  qt6_add_shaders(Circles \"Circles\"     PREFIX         \"\/qt\/qml\/Circles\"     FILES         \"circle5.frag\" )  target_link_libraries(Circles     PRIVATE Qt6::Quick Qt6::Core5Compat )  install(     FILES         ${CMAKE_BINARY_DIR}\/qmldir         ${CMAKE_BINARY_DIR}\/Circles.qmltypes         ${CMAKE_BINARY_DIR}\/Circle1.qml         ${CMAKE_BINARY_DIR}\/Circle2.qml         ${CMAKE_BINARY_DIR}\/Circle3.qml         ${CMAKE_BINARY_DIR}\/Circle4.qml         ${CMAKE_BINARY_DIR}\/Circle5.qml         ${CMAKE_BINARY_DIR}\/circle_border.png         ${CMAKE_BINARY_DIR}\/circle_fill.png         ${CMAKE_BINARY_DIR}\/${CMAKE_SHARED_LIBRARY_PREFIX}Circles${CMAKE_SHARED_LIBRARY_SUFFIX}         ${CMAKE_BINARY_DIR}\/${CMAKE_SHARED_LIBRARY_PREFIX}Circlesplugin${CMAKE_SHARED_LIBRARY_SUFFIX}     DESTINATION         ${CMAKE_PREFIX_PATH}\/qml\/Circles ) <\/code><\/pre>\n<p>\u0421\u0431\u043e\u0440\u043a\u0443 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0442\u0430\u043a:<\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 QtCreator, \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 Release, \u0434\u0430\u043b\u0435\u0435 \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0442\u0435\u043d\u0435\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 (build\/Desktop_Qt_6_8_2-Release) \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u0431\u043e\u0440\u043a\u0443 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0442\u0430\u043a: \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 <strong><em>QtCreator<\/em><\/strong>, \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 <strong>Release<\/strong>, \u0434\u0430\u043b\u0435\u0435 \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0442\u0435\u043d\u0435\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 (<strong>build\/Desktop_Qt_6_8_2-Release<\/strong>) \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre><code class=\"bash\"># \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0442\u0435\u043d\u0435\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 cd build\/Desktop_Qt_6_8_2-Release\/ # \u0441\u0431\u043e\u0440\u043a\u0430 cmake --build . # \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e Qt\/6.8.2\/gcc_64\/qml, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u044c \u0432 QtCreator cmake --install .<\/code><\/pre>\n<p><strong>\u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442!<\/strong><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b <strong><em>QtCreator<\/em><\/strong> \u0441\u043c\u043e\u0433 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043a\u0430\u043a \u0443 \u0441\u0430\u043c\u043e\u0433\u043e <strong><em>QtCreator<\/em><\/strong> (\u0432\u0430\u0436\u043d\u043e \u043a\u0430\u043a\u043e\u0439 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0438 \u0435\u0433\u043e \u0440\u0430\u0437\u0440\u044f\u0434\u043d\u043e\u0441\u0442\u044c).<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432 \u043e\u043a\u043d\u0435 <strong>About Qt Creator<\/strong>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f0a\/bf5\/d70\/f0abf5d70aa9f831bb250fb8ed348963.png\" alt=\"\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435 QML \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430\" title=\"\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435 QML \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430\" width=\"651\" height=\"388\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f0a\/bf5\/d70\/f0abf5d70aa9f831bb250fb8ed348963.png\"\/><\/p>\n<div><figcaption>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435 QML \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0434 <strong><em>Linux<\/em><\/strong> \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e <strong>GCC x86_64<\/strong>, \u0430 \u043f\u043e\u0434 <strong><em>Windows<\/em><\/strong> <strong>MSVC 32bit<\/strong>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0434 <strong><em>Windows<\/em><\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <strong>MINGW<\/strong>, \u0442\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f <strong><em>QtCreator<\/em><\/strong> \u0438\u043c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p><strong>\u0422\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &#8212; &#171;<strong>Circle<\/strong>&#171;.<\/p>\n<p>\u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0446\u0432\u0435\u0442 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 (\u0433\u0440\u0430\u043d\u0438\u0446\u044b)<\/p>\n<\/li>\n<li>\n<p>\u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f05\/9f9\/4c7\/f059f94c7db95a053048eb2e31cc2084.png\" alt=\"\u041e\u043a\u043d\u043e QtCreator \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 Design \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0442\u0438\u043f\u0430 Circle\" title=\"\u041e\u043a\u043d\u043e QtCreator \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 Design \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0442\u0438\u043f\u0430 Circle\" width=\"1250\" height=\"802\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f05\/9f9\/4c7\/f059f94c7db95a053048eb2e31cc2084.png\"\/><\/p>\n<div><figcaption>\u041e\u043a\u043d\u043e QtCreator \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 Design \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0442\u0438\u043f\u0430 Circle<\/figcaption><\/div>\n<\/figure>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21161<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <strong><em>QML<\/em><\/strong> \u043a\u0430\u043a \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong><em>Qt Quick<\/em><\/strong> &#8212; <strong>Rectangle<\/strong>.<\/p>\n<p>\u041e\u043d \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0440\u0443\u0433, \u0435\u0441\u043b\u0438 \u0432 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>radius<\/strong> \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>Circle1.qml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">import QtQuick  Item {     id: root      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     width: 100     height: 100      \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"silver\").     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"black\").     \/\/ borderWidth - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 5).     property color color: \"silver\"     property color borderColor: \"black\"     property real borderWidth: 5      Rectangle {         id: view          \/\/ \u0420\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430 \u0440\u0430\u0432\u0435\u043d \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0438\u0437 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         \/\/ \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043a\u0440\u0443\u0433 \u0431\u0443\u0434\u0435\u0442 \u0432\u043f\u0438\u0441\u0430\u043d \u0432 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         radius: Math.min(root.width, root.height)          \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0440\u0430\u0432\u043d\u044b \u0440\u0430\u0434\u0438\u0443\u0441\u0443, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043a\u0440\u0443\u0433\u043b\u044b\u043c.         width: view.radius         height: view.radius          \/\/ \u0426\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u0440\u0443\u0433 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u043e\u0441\u044f\u043c X \u0438 Y \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u0440\u0443\u0433 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0442\u043e\u0447\u043d\u043e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.         x: (root.width - view.radius) \/ 2         y: (root.height - view.radius) \/ 2          \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e color.         color: root.color          \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430:         \/\/ width - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 borderWidth.         \/\/ color - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 borderColor.         border {             width: root.borderWidth             color: root.borderColor         }     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u041b\u0435\u0433\u043a\u043e<\/strong><\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21162<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <strong>Canvas<\/strong>.<\/p>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430, \u044d\u0442\u043e\u0442 \u0441\u043a\u043e\u0440\u0435\u0435 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439, \u0447\u0435\u043c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439.<\/p>\n<p><strong><em>Context2D API<\/em><\/strong> \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 <a href=\"https:\/\/www.w3schools.com\/html\/html5_canvas.asp\" rel=\"noopener noreferrer nofollow\">W3C Canvas 2D Context API<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>Circle2.qml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">import QtQuick  Item {     id: root      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     width: 100     height: 100      \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"silver\").     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"black\").     \/\/ borderWidth - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 5).     property color color: \"silver\"     property color borderColor: \"black\"     property real borderWidth: 5      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:     \/\/ \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 requestPaint(),     \/\/ \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 Canvas.     onWidthChanged: view.requestPaint()     onHeightChanged: view.requestPaint()      \/\/ \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 (\u0446\u0432\u0435\u0442\u0430, \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b)     \/\/ \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c requestPaint() \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.     onColorChanged: view.requestPaint()     onBorderWidthChanged: view.requestPaint()     onBorderColorChanged: view.requestPaint()      \/\/ \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c requestPaint() \u043f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430,     \/\/ \u0447\u0442\u043e\u0431\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443.     Component.onCompleted: view.requestPaint()      \/\/ \u042d\u043b\u0435\u043c\u0435\u043d\u0442 Canvas \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0443\u0433\u0430.     Canvas {         id: view          \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 Canvas \u0440\u0430\u0432\u043d\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         width: root.width         height: root.height          \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0446\u0435\u043d\u0442\u0440\u0430 Canvas.         property real centerX: width \/ 2         property real centerY: height \/ 2          \/\/ \u0420\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b,         \/\/ \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u0434\u043b\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u044b (root.borderWidth \/ 2).         property real radius: Math.min(view.centerX, view.centerY) - root.borderWidth \/ 2          \/\/ \u041c\u0435\u0442\u043e\u0434 onPaint \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 Canvas.         onPaint: {             \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 2D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.             var ctx = getContext(\"2d\");              \/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.             ctx.beginPath();              \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0441 \u0446\u0435\u043d\u0442\u0440\u043e\u043c \u0432 (centerX, centerY) \u0438 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c radius.             ctx.arc(view.centerX, view.centerY, view.radius, 0, 2 * Math.PI, false);              \/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0437\u0430\u043b\u0438\u0432\u043a\u0443.             ctx.fillStyle = root.color;             ctx.fill();              \/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043b\u0438\u043d\u0438\u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0437\u0430\u0442\u0435\u043c \u0440\u0438\u0441\u0443\u0435\u043c \u0433\u0440\u0430\u043d\u0438\u0446\u0443.             ctx.lineWidth = root.borderWidth;             ctx.strokeStyle = root.borderColor;             ctx.stroke();         }     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u0421\u0440\u0435\u0434\u043d\u0435<\/strong><\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21163<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e, \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442 \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0437\u0430\u043b\u0438\u0432\u043a\u0438, \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u0440\u0430\u0439\u0442\u0430, \u043f\u043e\u043c\u0435\u0449\u0443 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>Image<\/strong> \u0438 \u0431\u0443\u0434\u0443 \u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u0446\u0432\u0435\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 <strong>ColorOverlay<\/strong>.<\/p>\n<p>\u041c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<p><strong>\u0415\u0441\u0442\u044c \u043f\u0430\u0440\u0430 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f Qt6.<\/strong><\/p>\n<ol>\n<li>\n<p>\u0412 <strong><em>Qt6<\/em><\/strong> \u043d\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <strong>ColorOverlay<\/strong> \u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 import <strong>Qt5Compat.GraphicalEffects<\/strong>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <strong>Qt5 Compatibility Module<\/strong>.<\/p>\n<\/li>\n<li>\n<p>\u0412 <strong><em>Qt6<\/em><\/strong> \u0434\u043b\u044f <strong><em>CMake<\/em><\/strong> \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <strong>qt6_add_qml_module<\/strong>. \u0421 \u0435\u0451 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f <strong><em>QML<\/em><\/strong> \u043c\u043e\u0434\u0443\u043b\u044f. \u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u0438\u0445 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 <strong>RESOURCES<\/strong>.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3f4\/434\/c44\/3f4434c447223404acb3eadbfd8028ed.png\" alt=\"Qt5 Compatibility Module \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\" title=\"Qt5 Compatibility Module \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432\" width=\"1004\" height=\"682\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3f4\/434\/c44\/3f4434c447223404acb3eadbfd8028ed.png\"\/><\/p>\n<div><figcaption><strong>Qt5 Compatibility Module \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong><\/figcaption><\/div>\n<\/figure>\n<details class=\"spoiler\">\n<summary>Circle3.qml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">import QtQuick import Qt5Compat.GraphicalEffects  Item {     id: root      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     width: 100     height: 100      \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"silver\").     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"black\").     property color color: \"silver\"     property color borderColor: \"black\"      \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u0440\u0443\u0433\u0430.     Image {         id: image_fill          \/\/ \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 Item).         anchors.fill: parent          \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u043e\u0440\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u0440\u0443\u0433\u0430.         source: \"circle_fill.png\"          \/\/ \u0420\u0435\u0436\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c,         \/\/ \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c.         fillMode: Image.PreserveAspectFit     }      \/\/ \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442 ColorOverlay \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u0440\u0443\u0433\u0430.     ColorOverlay {         \/\/ \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f image_fill.         anchors.fill: image_fill          \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 image_fill.         source: image_fill          \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e color.         color: root.color     }      \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     Image {         id: image_border          \/\/ \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 Item).         anchors.fill: parent          \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u043e\u0440\u043c\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.         source: \"circle_border.png\"          \/\/ \u0420\u0435\u0436\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f: \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c,         \/\/ \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u043e\u0441\u044c \u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c.         fillMode: Image.PreserveAspectFit     }      \/\/ \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u044d\u0444\u0444\u0435\u043a\u0442 ColorOverlay \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     ColorOverlay {         \/\/ \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f image_border.         anchors.fill: image_border          \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 image_border.         source: image_border          \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e borderColor.         color: root.borderColor     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u0421\u0440\u0435\u0434\u043d\u0435<\/strong><\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21164<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <strong><em>Qt Quick Shapes<\/em><\/strong>.<\/p>\n<p>\u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438.<\/p>\n<blockquote>\n<p><strong><em>Qt Quick Shapes<\/em><\/strong> \u0440\u0438\u0441\u0443\u0435\u0442 \u0444\u0438\u0433\u0443\u0440\u044b \u0438\u0437 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0438\u0445 \u043d\u0430 GPU. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0439 \u0442\u0440\u0438\u0430\u043d\u0433\u0443\u043b\u044f\u0446\u0438\u0438 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u0442\u044b\u0445 \u043a\u0440\u0438\u0432\u044b\u0445, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043a\u0440\u0438\u0432\u044b\u0435 \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0447\u0435\u043d\u044c \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 \u043a \u0444\u0438\u0433\u0443\u0440\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043a\u0440\u0438\u0432\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u043e\u043b\u0435\u0435 \u043c\u0435\u043b\u043a\u0438\u0445 \u043f\u0440\u044f\u043c\u044b\u0445 \u043b\u0438\u043d\u0438\u0439.<\/p>\n<\/blockquote>\n<details class=\"spoiler\">\n<summary>Circle4.qml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">import QtQuick import QtQuick.Shapes  Item {     id: root      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     width: 100     height: 100      \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"silver\").     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"black\").     \/\/ borderWidth - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 5).     property color color: \"silver\"     property color borderColor: \"black\"     property real borderWidth: 5      \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 Shape \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0443\u0433\u0430.     Shape {         \/\/ \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 (\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 Item).         anchors.fill: parent          \/\/ \u042d\u043b\u0435\u043c\u0435\u043d\u0442 ShapePath \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.         ShapePath {             id: circlePath              \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e color.             fillColor: root.color              \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e borderColor.             strokeColor: root.borderColor              \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e borderWidth.             strokeWidth: root.borderWidth              \/\/ \u042d\u043b\u0435\u043c\u0435\u043d\u0442 PathAngleArc \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0443\u0433\u0438 \u0438\u043b\u0438 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438.             PathAngleArc {                 \/\/ \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0446\u0435\u043d\u0442\u0440\u0430 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.                 centerX: root.width \/ 2                 centerY: root.height \/ 2                  \/\/ \u0420\u0430\u0434\u0438\u0443\u0441\u044b \u043f\u043e \u043e\u0441\u044f\u043c X \u0438 Y \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.                 \/\/ \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043a\u0440\u0443\u0433 \u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u0432\u043f\u0438\u0441\u0430\u043d \u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c.                 radiusX: root.width \/ 2                 radiusY: root.height \/ 2                  \/\/ \u0423\u0433\u043e\u043b \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0443\u0433\u0438 (0 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432).                 startAngle: 0                  \/\/ \u0423\u0433\u043e\u043b \u0440\u0430\u0437\u0432\u043e\u0440\u043e\u0442\u0430 \u0434\u0443\u0433\u0438 (360 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432), \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c.                 sweepAngle: 360             }         }     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u0421\u0440\u0435\u0434\u043d\u0435<\/strong><\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21165<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <strong><em>ShaderEffect<\/em><\/strong>.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0443\u0433\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0448\u0438\u043d\u043d\u044b\u0439 \u0448\u0435\u0439\u0434\u0435\u0440 \u0438 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0438\u0448\u044c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u044b\u043c.<\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0448\u0435\u0439\u0434\u0435\u0440\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 <strong><em>Qt6<\/em><\/strong> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <strong><em>CMake<\/em><\/strong> \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>qt6_add_shaders<\/strong>.<\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>qt6_add_shaders<\/strong> \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <strong><em>Qt Shader Baker<\/em><\/strong> \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0437\u0432\u0430\u043d \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438, \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b <strong>.qsb<\/strong> \u0431\u0443\u0434\u0443\u0442 \u043d\u0435\u044f\u0432\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<details class=\"spoiler\">\n<summary>circle5.frag<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">#version 440 \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e GLSL (OpenGL Shading Language), \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c.  \/\/ \u0412\u0445\u043e\u0434\u043d\u044b\u0435 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (qt_TexCoord0) \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0432\u0435\u0440\u0448\u0438\u043d\u043d\u043e\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430. \/\/ \u041e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0435\u043b\u044f (\u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f). layout(location = 0) in vec2 qt_TexCoord0;  \/\/ \u0412\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 (\u043f\u0438\u043a\u0441\u0435\u043b\u044f). \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u0431\u0443\u0444\u0435\u0440 \u043a\u0430\u0434\u0440\u0430. layout(location = 0) out vec4 fragColor;  \/\/ \u0421\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \/\/ \u0411\u043b\u043e\u043a uniform \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0438\u0437\u0432\u043d\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437 OpenGL \u0438\u043b\u0438 Qt). \/\/ std140 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0441\u043f\u043e\u0441\u043e\u0431 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438. layout(std140, binding = 0) uniform buf {     mat4 qt_Matrix;       \/\/ \u041c\u0430\u0442\u0440\u0438\u0446\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f (\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435).     vec4 color;           \/\/ \u0426\u0432\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u0440\u0443\u0433\u0430.     vec4 borderColor;     \/\/ \u0426\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b (\u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438).     float borderWidth;    \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0432 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445. };  \/\/ \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0448\u0435\u0439\u0434\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430. void main() {      \/\/ \u041d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043e\u0442 (0, 0) \u0434\u043e (1, 1) \u0438 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0438\u0445     vec2 uv = qt_TexCoord0.st - vec2(0.5, 0.5);     \/\/ \u041f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0446\u0435\u043d\u0442\u0440 \u043a\u0440\u0443\u0433\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0432 \u0442\u043e\u0447\u043a\u0435 (0.5, 0.5).     \/\/ \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f.      \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 \u0434\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f     float dist = length(uv);     \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f length \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0435\u0432\u043a\u043b\u0438\u0434\u043e\u0432\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 (0.5, 0.5) \u0434\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u0438 (uv.x, uv.y).      \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043a\u0440\u0443\u0433     if (dist &gt; 0.5) {         \/\/ \u0415\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 0.5 (\u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430), \u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043a\u0440\u0443\u0433\u0430.         \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 (RGBA = 0, 0, 0, 0).         fragColor = vec4(0.0); \/\/ \u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0444\u043e\u043d      } else if (dist &gt; 0.5 - borderWidth) {         \/\/ \u0415\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u043c\u0435\u0436\u0434\u0443 0.5 \u0438 0.5 - borderWidth,         \/\/ \u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u0440\u0443\u0433\u0430.         \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b (borderColor).         fragColor = borderColor; \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0446\u0432\u0435\u0442 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438      } else {         \/\/ \u0415\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u043b\u0438 \u0440\u0430\u0432\u043d\u043e 0.5 - borderWidth,         \/\/ \u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0440\u0443\u0433\u0430.         \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u0440\u0443\u0433\u0430 (color).         fragColor = color; \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0446\u0432\u0435\u0442 \u043a\u0440\u0443\u0433\u0430     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>Circle5.qml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">import QtQuick  Item {     id: root      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     width: 100     height: 100      \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430 \u043a\u0440\u0443\u0433\u0430:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"silver\").     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"black\").     \/\/ borderWidth - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 5).     property color color: \"silver\"        \/\/ \u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430.     property color borderColor: \"black\"   \/\/ \u0426\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     property real borderWidth: 5          \/\/ \u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.      \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ShaderEffect \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0443\u0433\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0448\u0435\u0439\u0434\u0435\u0440\u0430.     ShaderEffect {         id: circleEffect          \/\/ \u0426\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u043c ShaderEffect \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         anchors.centerIn: root          \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 ShaderEffect \u0440\u0430\u0432\u043d\u044b\u043c\u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e         \/\/ \u0438\u0437 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043a\u0440\u0443\u0433 \u0431\u044b\u043b \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043a\u0440\u0443\u0433\u043b\u044b\u043c.         width: Math.min(root.width, root.height)         height: width          \/\/ \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432 (blending), \u0447\u0442\u043e\u0431\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u0440\u0443\u0433\u0430 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e         \/\/ \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u043d\u0430 \u0444\u043e\u043d.         blending: true          \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0448\u0435\u0439\u0434\u0435\u0440:         \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430, \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         \/\/ borderWidth - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430, \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0448\u0438\u0440\u0438\u043d\u044b.         \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430, \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         property color color: root.color         property color borderColor: root.borderColor         property real borderWidth: root.borderWidth \/ width  \/\/ \u041d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.          \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f         \/\/ \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0443\u0433\u0430. \u0424\u0430\u0439\u043b \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 QSB.         fragmentShader: \"circle5.frag.qsb\"     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u0421\u043b\u043e\u0436\u043d\u043e<\/strong><\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21166<\/h2>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0442\u0438\u043f \u043e\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 <strong>QQuickPaintedItem<\/strong>.<\/p>\n<p><a href=\"https:\/\/doc.qt.io\/qt-6\/qtquick-customitems-painteditem-example.html\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a><\/p>\n<p><strong>QPainter<\/strong> &#8212; \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u0439 \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442. \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0434\u0430\u0432\u043d\u043e (\u0432 <strong><em>Qt3<\/em><\/strong> \u0443\u0436\u0435 \u0431\u044b\u043b). \u0417\u043d\u0430\u043a\u043e\u043c\u044b\u0439 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 <strong><em>QML<\/em><\/strong>.<\/p>\n<details class=\"spoiler\">\n<summary>circle6.h<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">#ifndef CIRCLE6_H #define CIRCLE6_H  #include &lt;QObject&gt; #include &lt;QQmlEngine&gt; #include &lt;QQuickPaintedItem&gt;  \/\/ \u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 Circle6, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 QQuickPaintedItem. \/\/ \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c QPainter \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. class Circle6 : public QQuickPaintedItem {     \/\/ \u041c\u0430\u043a\u0440\u043e\u0441, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432 \u0438 \u0441\u043b\u043e\u0442\u043e\u0432 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435.     Q_OBJECT      \/\/ \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0442\u0438\u043f\u0430 \u043a\u0430\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u0434\u043b\u044f QML.     QML_ELEMENT      \/\/ \u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 QML:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430.     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     \/\/ borderWidth - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)     Q_PROPERTY(QColor borderColor READ borderColor WRITE setBorderColor NOTIFY borderColorChanged)     Q_PROPERTY(qreal borderWidth READ borderWidth WRITE setBorderWidth NOTIFY borderWidthChanged)  public:     \/\/ \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.     explicit Circle6(QQuickItem *parent = nullptr);      \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430.     QColor color() const;      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430.     void setColor(const QColor &amp;color);      \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     QColor borderColor() const;      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     void setBorderColor(const QColor &amp;borderColor);      \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     qreal borderWidth() const;      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     void setBorderWidth(qreal borderWidth);      \/\/ \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 paint \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     \/\/ \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     void paint(QPainter *painter) override;  signals:     \/\/ \u0421\u0438\u0433\u043d\u0430\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u044e\u0442 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:     \/\/ colorChanged - \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438.     \/\/ borderColorChanged - \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.     \/\/ borderWidthChanged - \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.     void colorChanged(const QColor &amp;);     void borderColorChanged(const QColor &amp;);     void borderWidthChanged(qreal);  private:     \/\/ \u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:     QColor m_color;        \/\/ \u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430.     QColor m_borderColor;  \/\/ \u0426\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     qreal m_borderWidth;   \/\/ \u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430. };  #endif \/\/ CIRCLE6_H <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>circle6.cpp<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">#include \"circle6.h\"  #include &lt;QBrush&gt; #include &lt;QPainter&gt;  \/\/ \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Circle6. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. Circle6::Circle6(QQuickItem *parent):     QQuickPaintedItem{ parent } \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 QQuickPaintedItem {     \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u0440\u0443\u0433\u0430 (100x100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439).     setSize(QSizeF{ 100, 100 });      \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u0441\u0435\u0440\u044b\u0439).     setColor(QColor{ \"silver\" });      \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u0447\u0435\u0440\u043d\u044b\u0439).     setBorderColor(QColor{ \"black\" });      \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (5 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439).     setBorderWidth(5); }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430. QColor Circle6::color() const {     return m_color; \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_color. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430. void Circle6::setColor(const QColor &amp;color) {     m_color = color; \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_color.     emit colorChanged(color); \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u0433\u043d\u0430\u043b \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0438.     update(); \/\/ \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430. QColor Circle6::borderColor() const {     return m_borderColor; \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_borderColor. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430. void Circle6::setBorderColor(const QColor &amp;borderColor) {     m_borderColor = borderColor; \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_borderColor.     emit borderColorChanged(borderColor); \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u0433\u043d\u0430\u043b \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.     update(); \/\/ \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430. qreal Circle6::borderWidth() const {     return m_borderWidth; \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_borderWidth. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0439 \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430. void Circle6::setBorderWidth(qreal borderWidth) {     m_borderWidth = borderWidth; \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_borderWidth.     emit borderWidthChanged(borderWidth); \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u0433\u043d\u0430\u043b \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b.     update(); \/\/ \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430. void Circle6::paint(QPainter *painter) {     \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u0438\u0441\u0442\u044c (brush) \u0434\u043b\u044f \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c.     painter-&gt;setBrush(m_color);      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u043e (pen) \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u0438 \u0442\u043e\u043b\u0449\u0438\u043d\u043e\u0439.     painter-&gt;setPen(QPen{ m_borderColor, m_borderWidth });      \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     QSizeF itemSize = size();      \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u044d\u043b\u043b\u0438\u043f\u0441 (\u043a\u0440\u0443\u0433), \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.     \/\/ \u041a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043b\u043b\u0438\u043f\u0441\u0430 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u043b\u0430 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     painter-&gt;drawEllipse(         m_borderWidth, \/\/ \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 X (\u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b).         m_borderWidth, \/\/ \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 Y (\u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b).         itemSize.width() - m_borderWidth * 2, \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u044d\u043b\u043b\u0438\u043f\u0441\u0430 (\u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043e\u0431\u0435\u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d).         itemSize.height() - m_borderWidth * 2 \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u044d\u043b\u043b\u0438\u043f\u0441\u0430 (\u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043e\u0431\u0435\u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d).     ); } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u0421\u0440\u0435\u0434\u043d\u0435<\/strong><\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21167<\/h2>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0442\u0438\u043f \u043e\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 <strong>QQuickItem<\/strong>.<\/p>\n<p><a href=\"https:\/\/doc.qt.io\/qt-6\/qtquick-scenegraph-customgeometry-example.html\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a><\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445 <strong>Qt Quick<\/strong> (<a href=\"https:\/\/github.com\/qt\/qtdeclarative\/blob\/dev\/src\/quick\/items\/qquickrectangle_p.h\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 Rectangle<\/a>)<\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 <strong>QPainter<\/strong>, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439.<br \/> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 <a href=\"https:\/\/doc.qt.io\/qt-6\/qsgnode.html\" rel=\"noopener noreferrer nofollow\">QSGNode<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>circle7.h<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">#ifndef CIRCLE7_H #define CIRCLE7_H  #include &lt;QObject&gt; #include &lt;QQuickItem&gt; #include &lt;QSGGeometryNode&gt;  \/\/ \u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 Circle7, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 QQuickItem. \/\/ \u042d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 QSGNode \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043a\u0440\u0443\u0433\u0430. class Circle7 : public QQuickItem {      \/\/ \u041c\u0430\u043a\u0440\u043e\u0441, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432 \u0438 \u0441\u043b\u043e\u0442\u043e\u0432 \u0432 \u043a\u043b\u0430\u0441\u0441\u0435.     Q_OBJECT      \/\/ \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0442\u0438\u043f\u0430 \u043a\u0430\u043a \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u0434\u043b\u044f QML.     QML_ELEMENT      \/\/ \u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 QML:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430.     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     \/\/ borderWidth - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)     Q_PROPERTY(QColor borderColor READ borderColor WRITE setBorderColor NOTIFY borderColorChanged)     Q_PROPERTY(qreal borderWidth READ borderWidth WRITE setBorderWidth NOTIFY borderWidthChanged)  public:     \/\/ \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.     explicit Circle7(QQuickItem *parent = nullptr);      \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430.     QColor color() const;      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430.     void setColor(const QColor &amp;color);      \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     QColor borderColor() const;      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     void setBorderColor(const QColor &amp;borderColor);      \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     qreal borderWidth() const;      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     void setBorderWidth(qreal borderWidth);  protected:     \/\/ \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 updatePaintNode \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0443\u0437\u043b\u0430\u043c\u0438 QSGNode.     \/\/ \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     QSGNode *updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) override;  signals:     \/\/ \u0421\u0438\u0433\u043d\u0430\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u044e\u0442 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:     \/\/ colorChanged - \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438.     \/\/ borderColorChanged - \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.     \/\/ borderWidthChanged - \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.     void colorChanged(const QColor &amp;);     void borderColorChanged(const QColor &amp;);     void borderWidthChanged(qreal);  private:     \/\/ \u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:     QColor m_color;        \/\/ \u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430.     QColor m_borderColor;  \/\/ \u0426\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.     qreal m_borderWidth;   \/\/ \u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430.      \/\/ \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u043a\u0440\u0443\u0433\u0430.     \/\/ \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0443\u0437\u0435\u043b \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438, \u0446\u0432\u0435\u0442 \u0438 \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430.     void updateCircleGeometry(QSGGeometryNode *node, const QColor &amp;color, float radius); };  #endif \/\/ CIRCLE7_H <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>circle7.cpp<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">#include \"circle7.h\"  #include &lt;QSGFlatColorMaterial&gt; #include &lt;GL\/gl.h&gt;  \/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0435\u0440\u0448\u0438\u043d \u0434\u043b\u044f \u0430\u043f\u043f\u0440\u043e\u043a\u0441\u0438\u043c\u0430\u0446\u0438\u0438 \u043a\u0440\u0443\u0433\u0430 (\u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435, \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u0440\u0443\u0433). const int numVertices = 32;  \/\/ \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 sin \u0438 cos. \/\/ \u042d\u0442\u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0442\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. static float precomputedCos[numVertices]; static float precomputedSin[numVertices];  \/\/ \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0442\u0430\u0431\u043b\u0438\u0446 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b. struct StaticInitializer {     StaticInitializer() {         \/\/ \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 sin \u0438 cos \u0434\u043b\u044f \u0443\u0433\u043b\u043e\u0432, \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u043f\u043e \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438.         for (int i = 0; i &lt; numVertices; ++i) {             float angle = 2 * M_PI * i \/ numVertices; \/\/ \u0423\u0433\u043e\u043b \u0432 \u0440\u0430\u0434\u0438\u0430\u043d\u0430\u0445 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0448\u0438\u043d\u044b.             precomputedCos[i] = cos(angle); \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043a\u043e\u0441\u0438\u043d\u0443\u0441 \u0443\u0433\u043b\u0430.             precomputedSin[i] = sin(angle); \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0441\u0438\u043d\u0443\u0441 \u0443\u0433\u043b\u0430.         }     } };  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b. \/\/ \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0434\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. static StaticInitializer staticInitializer;  \/\/ \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 Circle7. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430. Circle7::Circle7(QQuickItem *parent):     QQuickItem{ parent } \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 QQuickItem. {     \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0440\u0443\u0433\u0430 (100x100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439).     setSize(QSizeF{ 100, 100 });      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u0441\u0432\u0435\u0442\u043b\u043e-\u0441\u0435\u0440\u044b\u0439).     setColor(QColor{ \"silver\" });      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u0447\u0435\u0440\u043d\u044b\u0439).     setBorderColor(QColor{ \"black\" });      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (5 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439).     setBorderWidth(5);      \/\/ \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0444\u043b\u0430\u0433, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438.     setFlag(ItemHasContents, true); }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430. QColor Circle7::color() const {     return m_color; \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_color. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430. void Circle7::setColor(const QColor &amp;color) {     m_color = color; \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_color.     emit colorChanged(color); \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u0433\u043d\u0430\u043b \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0438.     update(); \/\/ \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430. QColor Circle7::borderColor() const {     return m_borderColor; \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_borderColor. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430. void Circle7::setBorderColor(const QColor &amp;borderColor) {     m_borderColor = borderColor; \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_borderColor.     emit borderColorChanged(borderColor); \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u0433\u043d\u0430\u043b \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.     update(); \/\/ \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430. qreal Circle7::borderWidth() const {     return m_borderWidth; \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_borderWidth. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0439 \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430. void Circle7::setBorderWidth(qreal borderWidth) {     m_borderWidth = borderWidth; \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_borderWidth.     emit borderWidthChanged(borderWidth); \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u0433\u043d\u0430\u043b \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b.     update(); \/\/ \u0417\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0443\u0437\u043b\u0430 (node), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438. QSGNode *Circle7::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *) {     auto rootNode = oldNode;      \/\/ \u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0443\u0437\u0435\u043b \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0443\u0437\u043b\u044b.     if (rootNode == nullptr) {         rootNode = new QSGNode; \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0443\u0437\u0435\u043b.          \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0432\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u0443\u0437\u043b\u0430: \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0434\u0440\u0443\u0433\u043e\u0439 \u0434\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043a\u0440\u0443\u0433\u0430.         auto outerNode = new QSGGeometryNode;         auto innerNode = new QSGGeometryNode;          \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0443\u0437\u043b\u044b \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0443\u0437\u0435\u043b.         rootNode-&gt;appendChildNode(outerNode);         rootNode-&gt;appendChildNode(innerNode);     }      \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u0443\u0437\u043b\u044b (\u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043a\u0440\u0443\u0433\u0438).     auto outerNode = static_cast&lt;QSGGeometryNode *&gt;(rootNode-&gt;childAtIndex(0));     auto innerNode = static_cast&lt;QSGGeometryNode *&gt;(rootNode-&gt;childAtIndex(1));      \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430 \u043a\u0430\u043a \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     const auto radius = qMin(width(), height()) \/ 2;      \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043a\u0440\u0443\u0433\u0430 (\u0433\u0440\u0430\u043d\u0438\u0446\u044b).     updateCircleGeometry(outerNode, m_borderColor, radius);      \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u0434\u043b\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043a\u0440\u0443\u0433\u0430 (\u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u043b\u0438\u0432\u043a\u0430).     updateCircleGeometry(innerNode, m_color, radius - m_borderWidth);      return rootNode; \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0443\u0437\u0435\u043b. }  \/\/ \u041c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u043a\u0440\u0443\u0433\u0430. void Circle7::updateCircleGeometry(QSGGeometryNode *node, const QColor &amp;color, float radius) {     \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0434\u043b\u044f \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432.     QSGGeometry *geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), numVertices * 3);      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u0436\u0438\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u043a \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 (GL_TRIANGLES).     geometry-&gt;setDrawingMode(GL_TRIANGLES);      \/\/ \u041f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u043a \u0443\u0437\u043b\u0443 \u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0443\u0437\u0435\u043b \u0432\u043b\u0430\u0434\u0435\u0435\u0442 \u044d\u0442\u043e\u0439 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0435\u0439.     node-&gt;setGeometry(geometry);     node-&gt;setFlag(QSGNode::OwnsGeometry);      \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u0446\u0432\u0435\u0442\u043e\u043c.     QSGFlatColorMaterial *material = new QSGFlatColorMaterial;     material-&gt;setColor(color); \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430.      \/\/ \u041f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043a \u0443\u0437\u043b\u0443 \u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0443\u0437\u0435\u043b \u0432\u043b\u0430\u0434\u0435\u0435\u0442 \u044d\u0442\u0438\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u043c.     node-&gt;setMaterial(material);     node-&gt;setFlag(QSGNode::OwnsMaterial);      \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043c\u0430\u0441\u0441\u0438\u0432\u0443 \u0432\u0435\u0440\u0448\u0438\u043d \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438.     QSGGeometry::Point2D *vertices = geometry-&gt;vertexDataAsPoint2D();      \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0446\u0435\u043d\u0442\u0440 \u043a\u0440\u0443\u0433\u0430.     const QPointF center(width() \/ 2, height() \/ 2);      \/\/ \u0417\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0435\u0440\u0448\u0438\u043d \u0434\u043b\u044f \u0430\u043f\u043f\u0440\u043e\u043a\u0441\u0438\u043c\u0430\u0446\u0438\u0438 \u043a\u0440\u0443\u0433\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u043c\u0438.     for (int i = 0; i &lt; numVertices; ++i) {         \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0440\u0435\u0434\u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f cos \u0438 sin \u0438\u0437 \u0442\u0430\u0431\u043b\u0438\u0446.         float cosAngle1 = precomputedCos[i];         float sinAngle1 = precomputedSin[i];         float cosAngle2 = precomputedCos[(i + 1) % numVertices];         float sinAngle2 = precomputedSin[(i + 1) % numVertices];          \/\/ \u0426\u0435\u043d\u0442\u0440 \u043a\u0440\u0443\u0433\u0430 (\u043f\u0435\u0440\u0432\u0430\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430).         vertices[i * 3].set(center.x(), center.y());          \/\/ \u041f\u0435\u0440\u0432\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043d\u0430 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 (\u0432\u0442\u043e\u0440\u0430\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430).         vertices[i * 3 + 1].set(center.x() + radius * cosAngle1,                                 center.y() + radius * sinAngle1);          \/\/ \u0412\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043d\u0430 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 (\u0442\u0440\u0435\u0442\u044c\u044f \u0432\u0435\u0440\u0448\u0438\u043d\u0430 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430).         vertices[i * 3 + 2].set(center.x() + radius * cosAngle2,                                 center.y() + radius * sinAngle2);     }      \/\/ \u041f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.     node-&gt;markDirty(QSGNode::DirtyGeometry); } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u0421\u043b\u043e\u0436\u043d\u043e<\/strong><\/p>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 QtCreator \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 Design<\/h2>\n<p><strong>\u0412\u0441\u0451 7<\/strong> \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 <strong><em>QtCreator<\/em><\/strong> \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 <strong>Design<\/strong>.<\/p>\n<p>\u041a\u0430\u043a \u0431\u044b\u043b\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u044b\u0448\u0435 &#8212; \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 <strong>Design<\/strong> \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c <strong>Circles<\/strong>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/434\/1bb\/488\/4341bb488b26e9c1fc407b942d598837.png\" alt=\"QtCreator \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 Design c\u043e \u0441\u0446\u0435\u043d\u043e\u0439 \u0438\u0437 1024 \u043a\u0440\u0443\u0433\u043e\u0432 Circle1\" title=\"QtCreator \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 Design c\u043e \u0441\u0446\u0435\u043d\u043e\u0439 \u0438\u0437 1024 \u043a\u0440\u0443\u0433\u043e\u0432 Circle1\" width=\"1869\" height=\"1200\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/434\/1bb\/488\/4341bb488b26e9c1fc407b942d598837.png\"\/><\/p>\n<div><figcaption>QtCreator \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 Design c\u043e \u0441\u0446\u0435\u043d\u043e\u0439 \u0438\u0437 1024 \u043a\u0440\u0443\u0433\u043e\u0432 Circle1<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e <u>\u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u21163<\/u> &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e\u0441\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u0446\u0435\u043d\u0443 \u0441 1024 \u043a\u0440\u0443\u0433\u0430\u043c\u0438, \u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0442\u0438\u043f\u043e\u043c <strong>Circle3<\/strong> <strong><em>QtCreator<\/em><\/strong> \u0441\u043c\u043e\u0433 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0446\u0435\u043d\u0443 \u0441 400 \u043a\u0440\u0443\u0433\u0430\u043c\u0438.<\/p>\n<h2>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/h2>\n<p>\u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043d\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0441\u0446\u0435\u043d\u0435 \u0438\u0437 \u043a\u0440\u0443\u0433\u043e\u0432.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <strong>Benchmark<\/strong> (<strong>src\/benchmark<\/strong>).<\/p>\n<p>\u041e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0442\u0435\u0441\u0442\u0430 (\u043a\u0430\u043a\u043e\u0439 \u0438\u0437 7 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0446\u0435\u043d\u044b, \u0447\u0438\u0441\u043b\u043e \u043a\u0440\u0443\u0433\u043e\u0432, \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0435\u0441\u0442\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445).<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u0442 \u0441\u0446\u0435\u043d\u0443 \u0438 \u0436\u0434\u0451\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0441\u0435\u043a\u0443\u043d\u0434 \u0441\u0447\u0438\u0442\u0430\u044f \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u0431\u044b\u043b\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u044f \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0434\u0435\u043b\u0438\u0442 \u043e\u0431\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0442\u0435\u0441\u0442\u0430 \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0432 <strong><em>stdout<\/em><\/strong>.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 <strong>Benchmark<\/strong> \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043a\u0440\u0443\u0433\u043e\u0432 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0427\u0442\u043e\u0431\u044b \u0434\u0430\u0442\u044c \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043a\u0440\u0443\u0433\u0438 \u0434\u0432\u0438\u0436\u0443\u0449\u0438\u043c\u0441\u044f \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 QML \u0444\u0430\u0439\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Benchmark &#8212; Main.qml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">import QtQuick import QtQuick.Window  import Circles  Window {     id: root      visible: true \/\/ \u0414\u0435\u043b\u0430\u0435\u043c \u043e\u043a\u043d\u043e \u0432\u0438\u0434\u0438\u043c\u044b\u043c.     width: 1920 \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u043a\u043d\u0430.     height: 1080 \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u0443 \u043e\u043a\u043d\u0430.     title: \"Circles on Benchmark\" \/\/ \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043e\u043a\u043d\u0430.      \/\/ \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0434\u0432\u0438\u0433\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.     Item {         anchors.fill: parent \/\/ \u0420\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0430 \u0432\u0441\u0451 \u043e\u043a\u043d\u043e.          \/\/ Repeater \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.         Repeater {             model: $dataExchange &amp;&amp; $dataExchange.objectCount \/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (\u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e \u0438\u0437 C++).              \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f.             \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Loader \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.             Loader {                 id: circleLoader                  \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c, \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 $objectType.                 sourceComponent: {                     switch ($dataExchange &amp;&amp; $dataExchange.objectType) {                     case 1: return circle1Component; \/\/ Circle1                     case 2: return circle2Component; \/\/ Circle2                     case 3: return circle3Component; \/\/ Circle3                     case 4: return circle4Component; \/\/ Circle4                     case 5: return circle5Component; \/\/ Circle5                     case 6: return circle6Component; \/\/ Circle6                     case 7: return circle7Component; \/\/ Circle7                     default: return circle1Component; \/\/ \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Circle1.                     }                 }                  \/\/ \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435).                 x: Math.random() * (root.width - circleLoader.width)                 y: Math.random() * (root.height - circleLoader.height)                  \/\/ \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f (\u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0430\u044f).                 property real velocityX: (Math.random() - 0.5) * 10 \/\/ \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u043e X.                 property real velocityY: (Math.random() - 0.5) * 10 \/\/ \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043f\u043e Y.                  \/\/ \u0422\u0430\u0439\u043c\u0435\u0440 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u0438.                 Timer {                     id: updateTimer                     interval: 10 \/\/ \u0418\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f (\u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445).                     running: true \/\/ \u0422\u0430\u0439\u043c\u0435\u0440 \u0437\u0430\u043f\u0443\u0449\u0435\u043d.                     repeat: true \/\/ \u0422\u0430\u0439\u043c\u0435\u0440 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f.                      onTriggered: {                         \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u0430.                         circleLoader.x += circleLoader.velocityX;                         circleLoader.y += circleLoader.velocityY;                          \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u0441 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u043e\u043a\u043d\u0430.                         if (circleLoader.x &lt;= 0 || circleLoader.x + circleLoader.width &gt;= root.width) {                             circleLoader.velocityX *= -1; \/\/ \u041c\u0435\u043d\u044f\u0435\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e X.                         }                         if (circleLoader.y &lt;= 0 || circleLoader.y + circleLoader.height &gt;= root.height) {                             circleLoader.velocityY *= -1; \/\/ \u041c\u0435\u043d\u044f\u0435\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e Y.                         }                     }                 }             }         }     }      \/\/ \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0442\u0438\u043f\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0438 \u043e\u0431\u0449\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u0430\u0434\u0440\u043e\u0432.     Text {         id: infoText         anchors.left: root.left \/\/ \u041f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u043e\u043a\u043d\u0430.         anchors.top: root.top \/\/ \u041f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442 \u043a \u0432\u0435\u0440\u0445\u043d\u0435\u043c\u0443 \u043a\u0440\u0430\u044e \u043e\u043a\u043d\u0430.         font.pointSize: 20 \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430.          text: \"Type: \" + ($dataExchange &amp;&amp; $dataExchange.objectType) + \/\/ \u0422\u0438\u043f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.               \"   Count: \" + ($dataExchange &amp;&amp; $dataExchange.objectCount) + \/\/ \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.               \"   Total frame count: \" + ($dataExchange &amp;&amp; $dataExchange.totalFrameCount) \/\/ \u041e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0434\u0440\u043e\u0432.     }      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0434\u0440\u043e\u0432.     onFrameSwapped: {         if ($dataExchange) {             $dataExchange.totalFrameCount++; \/\/ \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043a\u0430\u0434\u0440\u043e\u0432.         }     }      \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0438\u043f\u0430 Circle.     Component {         id: circle1Component         Circle1 {             width: 50 \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430.             height: 50 \/\/ \u0412\u044b\u0441\u043e\u0442\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430.             color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1) \/\/ \u0421\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.         }     }      Component {         id: circle2Component         Circle2 {             width: 50             height: 50             color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)         }     }      Component {         id: circle3Component         Circle3 {             width: 50             height: 50             color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)         }     }      Component {         id: circle4Component         Circle4 {             width: 50             height: 50             color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)         }     }      Component {         id: circle5Component         Circle5 {             width: 50             height: 50             color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)         }     }      Component {         id: circle6Component         Circle6 {             width: 50             height: 50             color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)         }     }      Component {         id: circle7Component         Circle7 {             width: 50             height: 50             color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)         }     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0414\u043b\u044f \u043f\u043e\u0434\u0441\u0447\u0451\u0442\u0430 \u043e\u0431\u0449\u0435\u0433\u043e \u0447\u0438\u0441\u043b\u0430 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u043c <a href=\"https:\/\/doc.qt.io\/qt-5\/qml-qtquick-window-window.html#frameSwapped-signal\" rel=\"noopener noreferrer nofollow\">frameSwapped()<\/a> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>Window<\/strong>.<\/p>\n<p>\u0427\u0435\u0440\u0435\u0437 \u0444\u043b\u0430\u0433\u0438 Benchmark \u0431\u0443\u0434\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0441\u0435\u043a\u0443\u043d\u0434, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043b\u0438\u0442\u044c\u0441\u044f \u0442\u0435\u0441\u0442.<\/p>\n<p>\u0414\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0447\u0451\u0442\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0442\u0430\u0439\u043c\u0435\u0440 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0442\u043e\u043a\u0435, \u0438\u043d\u0430\u0447\u0435, \u043a\u043e\u0433\u0434\u0430 \u0441\u0446\u0435\u043d\u0430 \u043d\u0430\u0447\u043d\u0451\u0442 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c &#8212; \u044d\u0442\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u0441\u043a\u0430\u0436\u0451\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043b\u0430\u0441\u0441 \u043d\u0430 C++ \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u043e\u0442\u0441\u0447\u0451\u0442\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">#ifndef COUNTDOWN_THREAD_H #define COUNTDOWN_THREAD_H  #include &lt;QObject&gt; #include &lt;QThread&gt; #include &lt;QTimer&gt;  \/\/ \u041a\u043b\u0430\u0441\u0441 CountdownThread \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u0442\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0442\u0430\u0439\u043c\u0435\u0440 \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0435\u043a\u0443\u043d\u0434. class CountdownThread : public QThread {     Q_OBJECT \/\/ \u041c\u0430\u043a\u0440\u043e\u0441 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432 \u0438 \u0441\u043b\u043e\u0442\u043e\u0432.  public:     \/\/ \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043a\u043b\u0430\u0441\u0441\u0430. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445.     explicit CountdownThread(int durationSeconds):         m_durationSeconds{ durationSeconds } \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f m_durationSeconds.     {}  signals:     \/\/ \u0421\u0438\u0433\u043d\u0430\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043f\u043e\u0441\u043b\u0435 \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u0430.     void triggered();  protected:     \/\/ \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 run(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u043f\u043e\u0442\u043e\u043a\u0430.     void run() override {         \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 QTimer \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c.         QTimer timer;          \/\/ \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u0438\u0433\u043d\u0430\u043b timeout() \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u043a \u043b\u044f\u043c\u0431\u0434\u0430-\u0444\u0443\u043d\u043a\u0446\u0438\u0438.         connect(&amp;timer, &amp;QTimer::timeout, this, [this]() {             emit triggered(); \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0438\u0433\u043d\u0430\u043b triggered() \u043f\u0440\u0438 \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.         });          \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0442\u0430\u0439\u043c\u0435\u0440 \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434.         \/\/ \u041f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u0443\u043c\u043d\u043e\u0436\u0430\u044f \u043d\u0430 1000.         timer.start(m_durationSeconds * 1000);          \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0446\u0438\u043a\u043b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430.         \/\/ \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0442\u0430\u0439\u043c\u0435\u0440 \u043c\u043e\u0433 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u043e\u0442\u043e\u043a\u0430.         exec();     }  private:     int m_durationSeconds; \/\/ \u041f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u0430 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445. };  #endif \/\/ COUNTDOWN_THREAD_H <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0418\u043c\u0435\u044f \u043e\u0431\u0449\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0442\u0435\u0441\u0442\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u043c \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u0438 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0435\u0433\u043e \u0432 <strong><em>stdout<\/em><\/strong>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b81\/21a\/133\/b8121a13324c63cd60bc6a6f307181ed.png\" alt=\"\u0420\u0430\u0431\u043e\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Benchmark\" title=\"\u0420\u0430\u0431\u043e\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Benchmark\" width=\"610\" height=\"612\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b81\/21a\/133\/b8121a13324c63cd60bc6a6f307181ed.png\"\/><\/p>\n<div><figcaption>\u0420\u0430\u0431\u043e\u0442\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Benchmark<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044f \u0447\u0438\u0441\u043b\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0446\u0435\u043d\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u043c \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432.<\/p>\n<p>\u0418\u0437 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043c \u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0433\u0434\u0435 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 &#8212; \u0447\u0438\u0441\u043b\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 &#8212; \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u043a\u0430\u0434\u0440\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/adf\/a75\/a4a\/adfa75a4abe5167885a5cce89de5d6fd.png\" alt=\"\u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u0447\u0438\u0441\u043b\u043e FPS \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0447\u0438\u0441\u043b\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u0441\u0446\u0435\u043d\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 7 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432\" title=\"\u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u0447\u0438\u0441\u043b\u043e FPS \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0447\u0438\u0441\u043b\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u0441\u0446\u0435\u043d\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 7 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432\" width=\"919\" height=\"544\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/adf\/a75\/a4a\/adfa75a4abe5167885a5cce89de5d6fd.png\"\/><\/p>\n<div><figcaption>\u0421\u0440\u0435\u0434\u043d\u0435\u0435 \u0447\u0438\u0441\u043b\u043e FPS \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0447\u0438\u0441\u043b\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u0441\u0446\u0435\u043d\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 7 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432<\/figcaption><\/div>\n<\/figure>\n<p>\u0418\u0442\u0430\u043a &#8212; \u043f\u0435\u0440\u0432\u044b\u0435 3 \u043c\u0435\u0441\u0442\u0430:<\/p>\n<ol>\n<li>\n<p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <strong>QtQuick<\/strong>.<\/p>\n<\/li>\n<li>\n<p><strong>Qt Quick Shapes<\/strong>.<\/p>\n<\/li>\n<li>\n<p><strong>Canvas<\/strong>.<\/p>\n<\/li>\n<\/ol>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>\u0413\u043e\u0442\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 <strong><em>Qt Quick<\/em><\/strong>, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <strong>Rectangle<\/strong>, <strong>Text<\/strong> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u0441\u0442\u044b \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0445 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0437\u0430\u0434\u0430\u0447 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0440\u0438\u0432\u044b\u0435, \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b), \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f <strong>Qt Quick Shapes<\/strong> \u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <strong>Canvas<\/strong>. <strong>Qt Quick Shapes<\/strong> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 API \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0444\u0438\u0433\u0443\u0440, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u044d\u043b\u043b\u0438\u043f\u0441\u044b, \u043f\u0443\u0442\u0438 \u0438 \u043f\u043e\u043b\u0438\u043b\u0438\u043d\u0438\u0438. \u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. <strong>Canvas<\/strong> \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0445 \u0444\u0438\u0433\u0443\u0440 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c API, \u043f\u043e\u0445\u043e\u0436\u0435\u0433\u043e \u043d\u0430 <strong>HTML5 Canvas<\/strong>. \u0412\u044b\u0431\u043e\u0440 \u043c\u0435\u0436\u0434\u0443 <strong>Shapes<\/strong> \u0438 <strong>Canvas<\/strong> \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438.<\/p>\n<p>\u0421\u043f\u0440\u0430\u0439\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0435 \u0447\u0435\u0440\u0435\u0437 <strong>Image<\/strong>) \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0421\u043f\u0440\u0430\u0439\u0442\u044b \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438. \u041e\u043d\u0438 \u043c\u0435\u043d\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0435 \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0442\u0430\u043c, \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0445 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <strong>QQuickItem<\/strong> \u0441 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0443\u0437\u043b\u0430\u043c\u0438 (<strong>QSGNode<\/strong>), \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u0449\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b <strong><em>Qt Quick<\/em><\/strong>. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <strong>QSGNode<\/strong> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u0440\u0443\u0434\u043e\u0435\u043c\u043a\u043e\u0439 \u0438 \u043f\u043e\u0434\u0432\u0435\u0440\u0436\u0435\u043d\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0430\u043c.<\/p>\n<p>\u0412\u044b\u0431\u043e\u0440 \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439 \u043a \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.  \u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 <strong><em>Qt Quick<\/em><\/strong> \u0438 \u043c\u043e\u0434\u0443\u043b\u044f <strong>Shapes<\/strong>. \u0421\u043f\u0440\u0430\u0439\u0442\u044b \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043d\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430. \u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \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:\/\/habr.com\/ru\/articles\/894728\/\"> https:\/\/habr.com\/ru\/articles\/894728\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p><strong><em>Qt Quick<\/em><\/strong> \u0438 <strong><em>QML<\/em><\/strong> &#8212; \u043c\u043e\u0449\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u041d\u043e \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043c\u043e\u0436\u0435\u0442 \u0441\u0431\u0438\u0442\u044c \u0441 \u0442\u043e\u043b\u043a\u0443. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0432\u0441\u0435\u0445, \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0445 \u043c\u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 <strong><em>QML<\/em><\/strong> \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u0440\u0443\u0433\u0430.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0431\u0443\u0434\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 <strong><em>QtCreator<\/em><\/strong>.<\/p>\n<p>\u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0432 <a href=\"https:\/\/gitverse.ru\/kipitix\/circles_on_qml\/content\/master\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/a>.<\/p>\n<h2>\u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f<\/h2>\n<p>\u0421\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u044f\u043c:<\/p>\n<ul>\n<li>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u043c\u043e\u044f \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043e\u0446\u0435\u043d\u043a\u0430)<\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 <strong><em>QtCreator<\/em><\/strong> \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 <strong><em>Design<\/em><\/strong><\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/p>\n<\/li>\n<\/ul>\n<h2>\u041e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043e\u0444\u0442: \u041e\u0421 <strong><em>Ubuntu 24.04<\/em><\/strong>, <strong><em>Qt 6.8.2<\/em><\/strong>, <strong><em>QtCreator 16.0.0<\/em><\/strong>.<\/p>\n<h2>\u0421\u0431\u043e\u0440\u043a\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u044f QML \u0441 &#171;Circles&#187;<\/h2>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432 <strong><em>QtCreator<\/em><\/strong>, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c <strong><em>QML \u043c\u043e\u0434\u0443\u043b\u044c<\/em><\/strong>.<\/p>\n<p>\u0412 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u043e\u043d \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <strong>src\/circles<\/strong>.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u043e\u0434\u0443\u043b\u044f \u0432 <strong><em>QtCreator<\/em><\/strong> \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0441 <strong><em>QML<\/em><\/strong> \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0441 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435\u043c <strong><em>Qt<\/em><\/strong>. \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0443\u0442\u0438 \u0434\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 &#8212; &#171;<strong>~\/Qt\/6.8.2\/gcc_64\/qml\/&#187;<\/strong>.<\/p>\n<p>\u0414\u043b\u044f \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 <strong><em>CMake<\/em><\/strong> \u043c\u043e\u0434\u0443\u043b\u044f \u0441\u0435\u043a\u0446\u0438\u044e <strong>install<\/strong>.<\/p>\n<details class=\"spoiler\">\n<summary>CMakeLists.txt QML \u043c\u043e\u0434\u0443\u043b\u044f Circles<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">cmake_minimum_required(VERSION 3.16)  project(circles VERSION 0.1 LANGUAGES CXX)  set(CMAKE_CXX_STANDARD_REQUIRED ON)  find_package(Qt6 REQUIRED COMPONENTS Quick Core5Compat ShaderTools)  qt_standard_project_setup(REQUIRES 6.5)  qt6_add_qml_module(Circles     URI Circles     VERSION 1.0     QML_FILES         Circle1.qml         Circle2.qml         Circle3.qml         Circle4.qml         Circle5.qml     RESOURCES         circle_fill.png         circle_border.png     SOURCES         circle6.h         circle6.cpp         circle7.h         circle7.cpp )  qt6_add_shaders(Circles \"Circles\"     PREFIX         \"\/qt\/qml\/Circles\"     FILES         \"circle5.frag\" )  target_link_libraries(Circles     PRIVATE Qt6::Quick Qt6::Core5Compat )  install(     FILES         ${CMAKE_BINARY_DIR}\/qmldir         ${CMAKE_BINARY_DIR}\/Circles.qmltypes         ${CMAKE_BINARY_DIR}\/Circle1.qml         ${CMAKE_BINARY_DIR}\/Circle2.qml         ${CMAKE_BINARY_DIR}\/Circle3.qml         ${CMAKE_BINARY_DIR}\/Circle4.qml         ${CMAKE_BINARY_DIR}\/Circle5.qml         ${CMAKE_BINARY_DIR}\/circle_border.png         ${CMAKE_BINARY_DIR}\/circle_fill.png         ${CMAKE_BINARY_DIR}\/${CMAKE_SHARED_LIBRARY_PREFIX}Circles${CMAKE_SHARED_LIBRARY_SUFFIX}         ${CMAKE_BINARY_DIR}\/${CMAKE_SHARED_LIBRARY_PREFIX}Circlesplugin${CMAKE_SHARED_LIBRARY_SUFFIX}     DESTINATION         ${CMAKE_PREFIX_PATH}\/qml\/Circles ) <\/code><\/pre>\n<p>\u0421\u0431\u043e\u0440\u043a\u0443 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0442\u0430\u043a:<\/p>\n<p>\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 QtCreator, \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 Release, \u0434\u0430\u043b\u0435\u0435 \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0442\u0435\u043d\u0435\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 (build\/Desktop_Qt_6_8_2-Release) \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u0431\u043e\u0440\u043a\u0443 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0442\u0430\u043a: \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 <strong><em>QtCreator<\/em><\/strong>, \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 <strong>Release<\/strong>, \u0434\u0430\u043b\u0435\u0435 \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0442\u0435\u043d\u0435\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 (<strong>build\/Desktop_Qt_6_8_2-Release<\/strong>) \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre><code class=\"bash\"># \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0442\u0435\u043d\u0435\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 cd build\/Desktop_Qt_6_8_2-Release\/ # \u0441\u0431\u043e\u0440\u043a\u0430 cmake --build . # \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e Qt\/6.8.2\/gcc_64\/qml, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u044c \u0432 QtCreator cmake --install .<\/code><\/pre>\n<p><strong>\u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442!<\/strong><\/p>\n<p>\u0427\u0442\u043e\u0431\u044b <strong><em>QtCreator<\/em><\/strong> \u0441\u043c\u043e\u0433 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c, \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u043e\u043c \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043a\u0430\u043a \u0443 \u0441\u0430\u043c\u043e\u0433\u043e <strong><em>QtCreator<\/em><\/strong> (\u0432\u0430\u0436\u043d\u043e \u043a\u0430\u043a\u043e\u0439 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0438 \u0435\u0433\u043e \u0440\u0430\u0437\u0440\u044f\u0434\u043d\u043e\u0441\u0442\u044c).<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432 \u043e\u043a\u043d\u0435 <strong>About Qt Creator<\/strong>.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435 QML \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0434 <strong><em>Linux<\/em><\/strong> \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e <strong>GCC x86_64<\/strong>, \u0430 \u043f\u043e\u0434 <strong><em>Windows<\/em><\/strong> <strong>MSVC 32bit<\/strong>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0434 <strong><em>Windows<\/em><\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <strong>MINGW<\/strong>, \u0442\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f <strong><em>QtCreator<\/em><\/strong> \u0438\u043c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431\u044b \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p><strong>\u0422\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &#8212; &#171;<strong>Circle<\/strong>&#171;.<\/p>\n<p>\u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>\u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0446\u0432\u0435\u0442 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 (\u0433\u0440\u0430\u043d\u0438\u0446\u044b)<\/p>\n<\/li>\n<li>\n<p>\u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\">\n<div><figcaption>\u041e\u043a\u043d\u043e QtCreator \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 Design \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0442\u0438\u043f\u0430 Circle<\/figcaption><\/div>\n<\/figure>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21161<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b <strong><em>QML<\/em><\/strong> \u043a\u0430\u043a \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>\u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong><em>Qt Quick<\/em><\/strong> &#8212; <strong>Rectangle<\/strong>.<\/p>\n<p>\u041e\u043d \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u0440\u0443\u0433, \u0435\u0441\u043b\u0438 \u0432 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>radius<\/strong> \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n<details class=\"spoiler\">\n<summary>Circle1.qml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">import QtQuick  Item {     id: root      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     width: 100     height: 100      \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"silver\").     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"black\").     \/\/ borderWidth - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 5).     property color color: \"silver\"     property color borderColor: \"black\"     property real borderWidth: 5      Rectangle {         id: view          \/\/ \u0420\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430 \u0440\u0430\u0432\u0435\u043d \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0438\u0437 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         \/\/ \u042d\u0442\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043a\u0440\u0443\u0433 \u0431\u0443\u0434\u0435\u0442 \u0432\u043f\u0438\u0441\u0430\u043d \u0432 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         radius: Math.min(root.width, root.height)          \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0440\u0430\u0432\u043d\u044b \u0440\u0430\u0434\u0438\u0443\u0441\u0443, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043a\u0440\u0443\u0433\u043b\u044b\u043c.         width: view.radius         height: view.radius          \/\/ \u0426\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043a\u0440\u0443\u0433 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u043e\u0441\u044f\u043c X \u0438 Y \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u0440\u0443\u0433 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0442\u043e\u0447\u043d\u043e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.         x: (root.width - view.radius) \/ 2         y: (root.height - view.radius) \/ 2          \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e color.         color: root.color          \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430:         \/\/ width - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 borderWidth.         \/\/ color - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 borderColor.         border {             width: root.borderWidth             color: root.borderColor         }     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u041b\u0435\u0433\u043a\u043e<\/strong><\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21162<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <strong>Canvas<\/strong>.<\/p>\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430, \u044d\u0442\u043e\u0442 \u0441\u043a\u043e\u0440\u0435\u0435 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439, \u0447\u0435\u043c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439.<\/p>\n<p><strong><em>Context2D API<\/em><\/strong> \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 <a href=\"https:\/\/www.w3schools.com\/html\/html5_canvas.asp\" rel=\"noopener noreferrer nofollow\">W3C Canvas 2D Context API<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>Circle2.qml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">import QtQuick  Item {     id: root      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     width: 100     height: 100      \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"silver\").     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"black\").     \/\/ borderWidth - \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 5).     property color color: \"silver\"     property color borderColor: \"black\"     property real borderWidth: 5      \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:     \/\/ \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u0438\u043b\u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 requestPaint(),     \/\/ \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 Canvas.     onWidthChanged: view.requestPaint()     onHeightChanged: view.requestPaint()      \/\/ \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 (\u0446\u0432\u0435\u0442\u0430, \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0446\u0432\u0435\u0442\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u044b)     \/\/ \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c requestPaint() \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.     onColorChanged: view.requestPaint()     onBorderWidthChanged: view.requestPaint()     onBorderColorChanged: view.requestPaint()      \/\/ \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c requestPaint() \u043f\u0440\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430,     \/\/ \u0447\u0442\u043e\u0431\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443.     Component.onCompleted: view.requestPaint()      \/\/ \u042d\u043b\u0435\u043c\u0435\u043d\u0442 Canvas \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0443\u0433\u0430.     Canvas {         id: view          \/\/ \u0428\u0438\u0440\u0438\u043d\u0430 \u0438 \u0432\u044b\u0441\u043e\u0442\u0430 Canvas \u0440\u0430\u0432\u043d\u044b \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.         width: root.width         height: root.height          \/\/ \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0446\u0435\u043d\u0442\u0440\u0430 Canvas.         property real centerX: width \/ 2         property real centerY: height \/ 2          \/\/ \u0420\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b,         \/\/ \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u0434\u043b\u044f \u0433\u0440\u0430\u043d\u0438\u0446\u044b (root.borderWidth \/ 2).         property real radius: Math.min(view.centerX, view.centerY) - root.borderWidth \/ 2          \/\/ \u041c\u0435\u0442\u043e\u0434 onPaint \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 Canvas.         onPaint: {             \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 2D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.             var ctx = getContext(\"2d\");              \/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f.             ctx.beginPath();              \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0441 \u0446\u0435\u043d\u0442\u0440\u043e\u043c \u0432 (centerX, centerY) \u0438 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c radius.             ctx.arc(view.centerX, view.centerY, view.radius, 0, 2 * Math.PI, false);              \/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0437\u0430\u043b\u0438\u0432\u043a\u0443.             ctx.fillStyle = root.color;             ctx.fill();              \/\/ \u0417\u0430\u0434\u0430\u0435\u043c \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043b\u0438\u043d\u0438\u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b, \u0437\u0430\u0442\u0435\u043c \u0440\u0438\u0441\u0443\u0435\u043c \u0433\u0440\u0430\u043d\u0438\u0446\u0443.             ctx.lineWidth = root.borderWidth;             ctx.strokeStyle = root.borderColor;             ctx.stroke();         }     } } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p><strong>\u0421\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u0421\u0440\u0435\u0434\u043d\u0435<\/strong><\/p>\n<h2>\u0421\u043f\u043e\u0441\u043e\u0431 \u21163<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0440\u0430\u0439\u0442\u044b.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e, \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442 \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0437\u0430\u043b\u0438\u0432\u043a\u0438, \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u0440\u0430\u0439\u0442\u0430, \u043f\u043e\u043c\u0435\u0449\u0443 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <strong>Image<\/strong> \u0438 \u0431\u0443\u0434\u0443 \u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u0446\u0432\u0435\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 <strong>ColorOverlay<\/strong>.<\/p>\n<p>\u041c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<p><strong>\u0415\u0441\u0442\u044c \u043f\u0430\u0440\u0430 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f Qt6.<\/strong><\/p>\n<ol>\n<li>\n<p>\u0412 <strong><em>Qt6<\/em><\/strong> \u043d\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <strong>ColorOverlay<\/strong> \u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 import <strong>Qt5Compat.GraphicalEffects<\/strong>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <strong>Qt5 Compatibility Module<\/strong>.<\/p>\n<\/li>\n<li>\n<p>\u0412 <strong><em>Qt6<\/em><\/strong> \u0434\u043b\u044f <strong><em>CMake<\/em><\/strong> \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <strong>qt6_add_qml_module<\/strong>. \u0421 \u0435\u0451 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f <strong><em>QML<\/em><\/strong> \u043c\u043e\u0434\u0443\u043b\u044f. \u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u0438\u0445 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 <strong>RESOURCES<\/strong>.<\/p>\n<\/li>\n<\/ol>\n<figure class=\"full-width\">\n<div><figcaption><strong>Qt5 Compatibility Module \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong><\/figcaption><\/div>\n<\/figure>\n<details class=\"spoiler\">\n<summary>Circle3.qml<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"cpp\">import QtQuick import Qt5Compat.GraphicalEffects  Item {     id: root      \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.     width: 100     height: 100      \/\/ \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:     \/\/ color - \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"silver\").     \/\/ borderColor - \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0440\u0443\u0433\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \"black\").     property color color: \"silver\"     property color borderColor: \"black\"      \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u0440\u0443\u0433\u0430.     Image {         id: image_fill      <\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<\/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-453443","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/453443","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=453443"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/453443\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=453443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=453443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=453443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}