{"id":408535,"date":"2024-06-29T20:13:36","date_gmt":"2024-06-29T20:13:36","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=408535"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=408535","title":{"rendered":"\u041a\u0430\u043a \u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u043c\u0430\u043d\u0434\u0430\u043b\u044b<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a! \u042d\u0442\u043e \u043c\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0441\u0442 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435 \u0432 \u0440\u0430\u0441\u0447\u0435\u0442\u0435 \u043d\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043a\u0440\u0438\u0442\u0438\u043a\u0443 \u0438 \u0441\u043e\u0432\u0435\u0442\u044b \u043d\u0430 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435.<\/p>\n

\u041f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u044f<\/h3>\n

\u042f \u043e\u0431\u0443\u0447\u0430\u044e\u0441\u044c \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u043e \u043c\u043d\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0430\u0441\u044c \u0437\u043d\u0430\u043a\u043e\u043c\u0430\u044f \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433 \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b\u0430: <\/p>\n

\n

\u041d\u0435 \u043c\u043e\u0433 \u043b\u0438 \u0431\u044b \u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u043c\u0430\u043d\u0434\u0430\u043b?<\/p>\n<\/blockquote>\n

\u0418 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443:<\/p>\n

    \n
  1. \n

    \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0441\u043b\u043e\u0432\u0430 \u0432 \u0446\u0438\u0444\u0440\u044b \u043f\u043e \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u0443;<\/p>\n<\/li>\n

  2. \n

    \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c \u0432 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0446\u0438\u0444\u0440 \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0433\u0440\u0430\u043d\u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0445\u043e\u043b\u0441\u0442\u0430;<\/p>\n<\/li>\n

  3. \n

    \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0446\u0438\u0444\u0440 \u0432 \u043a\u0430\u0436\u0434\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u043f\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u0443;<\/p>\n<\/li>\n

  4. \n

    \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0432\u043e \u0432\u0441\u0435\u0445 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043d\u043e\u043c\u0435\u0440\u043e\u043c;<\/p>\n<\/li>\n

  5. \n

    \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0431\u043e\u0440\u0430 \u0446\u0432\u0435\u0442\u0430 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n

  6. \n

    \u0432\u044b\u0432\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f;<\/p>\n<\/li>\n

  7. \n

    \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u043c\u0430\u043d\u0434\u0430\u043b\u0435 \u0434\u043b\u044f \u0435\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n

    \u0414\u043b\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u043c\u043d\u0435 \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u043c \u043a\u0435\u0439\u0441\u043e\u043c. \u042f \u0432\u0437\u044f\u043b\u0441\u044f \u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u043e\u0431\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0435\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c. \u0421\u0440\u0430\u0437\u0443 \u043d\u0430 \u0443\u043c \u043f\u0440\u0438\u0448\u043b\u043e: PyQt 5, \u043a\u043d\u0438\u0433\u0443 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043d\u0435 \u0437\u0430\u0431\u043e\u0442\u043b\u0438\u0432\u043e \u043f\u043e\u0434\u0430\u0440\u0438\u043b\u0438 \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434, \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. PyQt 5 \u044f \u043d\u0435 \u0437\u043d\u0430\u044e, \u0434\u0430 \u0438 \u043d\u0435 \u043c\u043e\u044f \u0441\u0444\u0435\u0440\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u0431\u0435\u043a\u0435\u043d\u0434\u0430 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d Flask, \u0442.\u043a. \u043e\u0434\u0438\u043d \u0438\u0437 \u043a\u0435\u0439\u0441\u043e\u0432 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0431\u044b\u043b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Salesforce \u0441 Telegram \u0431\u043e\u0442\u043e\u043c (\u0414\u0430. \u042f \u043e\u0431\u0443\u0447\u0430\u044e\u0441\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 Salesforce) \u0438 Flask \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u0433\u0438\u0431\u043a\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c. \u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 Bootstrap \u0438 JQuery. <\/p>\n

    \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0443 \u043c\u043e\u0435\u0433\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0433\u043e \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0430 \u043d\u0435\u0442 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Photoshop \u0438\u043b\u0438 CorelDraw, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0431\u0435\u043a\u0435\u043d\u0434, \u0441\u043a\u0440\u0438\u043f\u0442 Powershell \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f Python \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0434\u0440\u0435\u0441. <\/p>\n

    \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0441\u043b\u0430\u043d\u043d\u043e\u0435 \u043c\u043d\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0440\u0430\u0441\u0447\u0435\u0442\u0443 \u043c\u0430\u043d\u0434\u0430\u043b\u044b.<\/p>\n

    \n<\/summary>\n
    \n
    \"\u0412\u0430\u0440\u0438\u0430\u043d\u0442
    \u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0432\u0430 \u043f\u043e \u0433\u0440\u0430\u043d\u0438<\/figcaption><\/figure>\n
    \"\u0412\u0430\u0440\u0438\u0430\u043d\u0442
    \u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0432\u0430 \u043f\u043e \u043b\u0443\u0447\u0430\u043c<\/figcaption><\/figure>\n<\/div>\n<\/details>\n

    \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h3>\n

    \u041a\u0430\u043a \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438? \u041f\u0440\u043e\u0432\u0435\u0434\u044f \u043f\u043e\u0438\u0441\u043a \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e<\/a>. \u041f\u0440\u043e\u0439\u0434\u044f \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0443, \u043d\u0430\u0448\u0435\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. <\/p>\n

    \u042d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f JS, \u043f\u0435\u0440\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043d\u0430 Canvas, \u0441\u0435\u0442\u043a\u0443 \u0432\u044b\u0432\u043e\u0434\u0438\u043b\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Honeycomb<\/a>. <\/p>\n

    \n\u0414\u043b\u0438\u043d\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430<\/summary>\n
    \n
    function buildMandalaVer12(countHex, strToHex) {     var element = document.getElementById(\"stage\");     element.height = window.innerHeight;     element.width = window.innerWidth;     var stage = new createjs.Stage(\"stage\");     stage.x = window.innerWidth \/ 2;     stage.y = window.innerHeight \/ 2;     var grid = new Grid();     grid.tileSize = 30;     grid.tileSpacing = 0;     grid.pointyTiles = false;     var stageTransformer = new StageTransformer().initialize({         element: element,         stage: stage     });     stageTransformer.addEventListeners();     var coordinates = grid.hexagon(0, 0, countHex, true);     let breakIter = false;     let stepRay = 0;     let stepBreak = 0;     let interimStep = 0;     let u = 1;     for (var i = 0; i < coordinates.length; i++) {         var q = coordinates[i].q,             r = coordinates[i].r,             center = grid.getCenterXY(q, r),             hexagon = new createjs.Shape();         if (u == stepBreak){             breakIter = false;             u = 0;         }         if (!breakIter) {             let str = strToHex[stepRay];             var text = new createjs.Text(str, \"10px Arial\", \"#ff7700\");             text.textBaseline = \"alphabetic\";             text.set({                 textAlign: \"center\",                 textBaseline: \"middle\",                 x: center.x,                 y: center.y,                 rotation: -90             });             if (stepRay > 0) {                 interimStep += 1;             }         }         if (interimStep == 6) {             breakIter = true;             interimStep = 1;             stepBreak += 1;         } else {             u += 1;         }         if (i + 1 == 1) {             stepRay = 1         }         hexagon.id = i;         hexagon.id2 = i;         \/\/ \u0440\u0430\u0441\u043a\u0430\u0441\u043a\u0430 \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439         if ((q == 0 && r == 0) || q == 0 || r == 0 || ((q * -1) == r)) {             hexagon.graphics                 .beginFill(\"rgba(150,0,0,1)\")                 \/\/ .beginFill(\"rgba(150,150,150,1)\")                 .beginStroke(\"rgba(250,250,250,1)\")                 .drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);         } else {             hexagon.graphics                 .beginFill(\"rgba(150,150,150,1)\")                 .beginStroke(\"rgba(250,250,250,1)\")                 .drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);         }         hexagon.q = q;         hexagon.r = r;         hexagon.x = center.x;         hexagon.y = center.y;         hexagon.addEventListener(\"click\", function (event) {             if (!stageTransformer.mouse.moved) {                 console.log(event.target.id)                 event.target.graphics                     .clear()                     .beginFill(\"rgba(150,0,0,1)\")                     .beginStroke(\"rgba(50,0,0,1)\")                     .drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);             }         });         stage.addChild(hexagon);         stage.addChild(text);     }     stage.set({         rotation: 90     });     var tick = function (event) {         stage.update();     };     tick();     createjs.Ticker.setFPS(60);     createjs.Ticker.addEventListener(\"tick\", tick);     return true; }<\/code><\/pre>\n<\/div>\n<\/details>\n
    \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0432 SVG \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438. \u041d\u0430 developer.mozilla.org \u0441\u043a\u0430\u0437\u0430\u043d\u043e:<\/p>\n
    \"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Tutorial\/Positions\"
    https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Tutorial\/Positions<\/figcaption><\/figure>\n
    \u041e\u043a. \u0417\u043d\u0430\u0447\u0438\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432\u0432\u043e\u0434\u0438\u043c\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0441\u0435\u0442\u043a\u0438.<\/p>\n
    \n\u041a\u043e\u0434 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0435\u0442\u043a\u0438<\/summary>\n
    \n
        let preload = document.getElementById('preloader');     \/\/ \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043c\u043c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u0438     let dWith = modelMandala.source.pageSize.width * 3.543307;     let dHeight = modelMandala.source.pageSize.height * 3.543307;     let dRangeMm = modelMandala.source.rangeMm * 3.543307;     \/\/ \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u0435\u0442\u043a\u0438 \u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442     let options = new BHex.Drawing.Options(dRangeMm, BHex.Drawing.Static.Orientation.PointyTop, new BHex.Drawing.Point(dWith, dHeight));     let gridBHex = new BHex.Grid(modelMandala.source.countWord);     let gridForPaint = new BHex.Drawing.Drawing(gridBHex, options);<\/code><\/pre>\n<\/div>\n<\/details>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0430\u043c\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e SVG.js \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 Polygon \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 Text \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438.<\/p>\n
    \n<\/summary>\n
    \n
    \/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 svg \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0435\u0433\u043e \u0432 <object> \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435     modelMandala.source.drawThisFigure = SVG().addTo(preload).size(dWith, dHeight).id(\"svgImg2\");     document.getElementById(\"svgImg2\").setAttribute('style', 'shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd');     let fontSize = modelMandala.source.rangeFontSize;     \/\/ \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Text     for (let i = 0; i < gridForPaint.grid.hexes.length; i++) {         modelMandala.source.drawThisFigure.polygon(gridForPaint.grid.hexes[i].points.map(({x, y}) => `${x},${y}`))             .fill('none')             .stroke({width: 1, color: '#000000'})             .css({cursor: 'pointer'})             .addClass('polygon')             .addClass('999')             .addClass(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)             .element('title').words(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)         modelMandala.source.drawThisFigure             .text(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)             .font({                 size: fontSize,                 anchor: 'middle',                 leading: 1.4,                 fill: modelMandala.source.colorWord             })             .addClass(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)             .translate(gridForPaint.grid.hexes[i].center.x, gridForPaint.grid.hexes[i].center.y + 3);     }<\/code><\/pre>\n<\/div>\n<\/details>\n
    \u0418 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0441 \u043f\u0430\u043b\u0438\u0442\u0440\u043e\u0439.<\/p>\n
    \n<\/summary>\n
    \n
    for (let i = 0; i < modelMandala.source.drawThisFigure.node.children.length; i++) {         if (modelMandala.source.drawThisFigure.node.children[i].tagName === \"polygon\") {             let str = modelMandala.source.drawThisFigure.node.children[i].classList[2];             dataPolygonMap.set(str, i);             modelMandala.source.drawThisFigure.node.children[i].onclick = function () {                 SetColorPolygonFunc();                 polygonObj = modelMandala.source.drawThisFigure.node.children[i];             }         }         if (modelMandala.source.drawThisFigure.node.children[i].tagName === \"text\") {             let str = modelMandala.source.drawThisFigure.node.children[i].classList[0];             dataTextMap.set(str, i);         }  }<\/code><\/pre>\n<\/div>\n<\/details>\n
    \u041d\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e,\u0430 \u043b\u0438\u0448\u044c \u0447\u0430\u0441\u0442\u044c\u044e.<\/p>\n
    \"\u0413\u043e\u0442\u043e\u0432\u043e\u0435
    \u0413\u043e\u0442\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0434\u0432\u0438\u0433\u043e\u043c<\/figcaption><\/figure>\n
    \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u0442\u0430\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0440\u0430\u0441\u0441\u0447\u0435\u0442 \u0438\u0434\u0435\u0442 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 (\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b 0,0), \u0430 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 SVG \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c Viewbox = «0 0 0 0». \u041e\u043a. \u0414\u0435\u043b\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0441\u0435\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430 \u043d\u0430 -2.<\/p>\n
    modelMandala.source.drawThisFigure.viewbox(dWith \/ -2 + ' ' + dHeight \/ -2 + ' ' + dWith + ' ' + dHeight);<\/code><\/pre>\n
    \u0414\u0430\u043b\u0435\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0440\u0430\u0441\u0441\u0447\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u0445. \u0423\u0441\u043b\u043e\u0432\u043d\u043e \u0432\u0441\u044e \u043c\u0430\u043d\u0434\u0430\u043b\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0448\u0435\u0441\u0442\u044c \u0441\u0435\u043a\u0442\u043e\u0440\u043e\u0432. \u041c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u0435\u0442\u043a\u0438, \u0438\u0445 \u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e polygon, \u0438 \u043d\u0430 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0440\u0430\u0441\u0441\u0447\u0435\u0442 \u043a\u0430\u043a \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435: \u0431\u0435\u0440\u0435\u043c \u0434\u0432\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0446\u0438\u0444\u0440\u044b \u0432 \u043d\u0438\u0445 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0438 \u0442\u0430\u043a \u0434\u043e \u043a\u043e\u043d\u0446\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 event \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b \u0435\u0433\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432 Map, \u0441\u0430\u043c SVG \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0441\u0441\u0447\u0435\u0442\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u043a\u0442\u043e\u0440\u0430.<\/p>\n
    \n<\/summary>\n
    \n
    \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b let modelMandala = {     rayA: {         rayCoord: [],         sector: []     },     rayB: {         rayCoord: [],         sector: []     },     rayC: {         rayCoord: [],         sector: []     },   ...<\/code><\/pre>\n
        \/\/ \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0447\u0435\u0442\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u0445     if (modelMandala.source.mandalaVersion === 1 || modelMandala.source.mandalaVersion === 2 || modelMandala.source.mandalaVersion === 3 || modelMandala.source.mandalaVersion === 4) {         axialDataSetFunc();     }     if (modelMandala.source.mandalaVersion === 5 || modelMandala.source.mandalaVersion === 6 || modelMandala.source.mandalaVersion === 7 || modelMandala.source.mandalaVersion === 8) {         borderDataSetFunc();     }<\/code><\/pre>\n
    \/\/ \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043c\u0430\u043d\u0434\u0430\u043b\u044b \"\u043f\u043e \u0433\u0440\u0430\u043d\u0438\" \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438     function getArrOnBorderAndSector() {         let resArr = [];         let interimArr = [];         let step = modelMandala.source.countWord;         \/\/ ray A         let a = modelMandala.source.countWord, b = 0;         let a2 = a, b2 = b, interimStep = step;         for (let i = 1; i <= step; i++) {             for (let y = 1; y <= interimStep; y++) {                 if (i === 1) {                     y === 1 ? modelMandala.rayA.rayCoord.push([a2, b2]) : modelMandala.rayA.rayCoord.push([a2, --b2])                 } else {                     y === 1 ? interimArr.push([a2, b2]) : interimArr.push([a2, --b2])                 }             }             a -= 1; b = 0; a2 = a; b2 = b;             interimStep -= 1;             if (i !== 1) {                 resArr.push(interimArr);                 interimArr = [];             }          }         modelMandala.rayA.sector.push(resArr);         resArr = [];          \/\/ ray B         ...<\/code><\/pre>\n
    \/\/ \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0432\u044b\u0431\u043e\u0440\u0430 \u043f\u0440\u0438 \u0440\u0430\u0441\u0441\u043a\u0440\u0430\u0449\u0438\u0432\u0430\u043d\u0438\u0438.     function axialDataSet() {         $('.navbar').width(0)         getArrOnRayAndSector();         \/\/ \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u043e \u043e\u0441\u044f\u043c         let numb = 1;         for (let key in modelMandala) {             numb = 1;             if (key === \"source\") break;             for (let i = 0; i < modelMandala[key].rayCoord.length; i++) {                 let obj = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].rayCoord[i][0], modelMandala[key].rayCoord[i][1], false);                 obj.classList.replace('999', String(modelMandala.source.wordInInt[numb]));                 obj.firstChild.innerHTML = String(modelMandala.source.wordInInt[numb]);                 obj.attributes.fill.value = '#f62b58';                 let objText = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].rayCoord[i][0], modelMandala[key].rayCoord[i][1], true);                 objText.firstChild.innerHTML = String(modelMandala.source.wordInInt[numb]);                 numb++;             }         }         \/\/ \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u043e \u043f\u043e\u043b\u044f\u043c         for (let key in modelMandala) {             let countStep = 1;             if (key === \"source\") break;             for (let i = 0; i < modelMandala[key].sector[0].length; i++) {                 for (let u = 0; u < modelMandala[key].sector[0][i].length; u++) {                     let objForChange = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].sector[0][i][u][0], modelMandala[key].sector[0][i][u][1], false);                     let objParent1, objParent2;                     if (key === \"rayA\") {                         objParent1 = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].sector[0][i][u][0] - 1, modelMandala[key].sector[0][i][u][1], false);                         objParent2 = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].sector[0][i][u][0] - 1, modelMandala[key].sector[0][i][u][1] + 1, false);                     }                                          ...                                          let res = Number(objParent1.classList[1]) + Number(objParent2.classList[1]);                     if (res >= 10) {                         res = String(res);                         res = Number(res[0]) + Number(res[1]);                     }                     objForChange.classList.replace('999', String(res));                     objForChange.firstChild.innerHTML = String(res);                     objForChange.attributes.fill.value = '#f62bdb';                     let objText = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].sector[0][i][u][0], modelMandala[key].sector[0][i][u][1], true);                     objText.firstChild.innerHTML = String(res);                 }             }         }         \/\/ \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f         let obj = getValOnCoordinate(modelMandala.source.drawThisFigure, 0, 0, false);         obj.classList.replace('999', String(modelMandala.source.wordInInt[0]));         obj.firstChild.innerHTML = String(modelMandala.source.wordInInt[0]);         obj.attributes.fill.value = '#f62b58';         let objText = getValOnCoordinate(modelMandala.source.drawThisFigure, 0, 0, true);         objText.firstChild.innerHTML = String(modelMandala.source.wordInInt[0]);         objText.setAttribute(\"font-weight\", \"900\");         $('#getImageSchema').popover('enable');         $('#getImageSchema').removeClass(\"invisible\");         $('#getImageColor').removeClass(\"invisible\");         $('.navbar').width(document.documentElement.scrollWidth)         setProgress(true);     }<\/code><\/pre>\n<\/div>\n<\/details>\n
    \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0430 \u043e\u043f\u0438\u0441\u0430\u043d\u043e: \u043f\u0435\u0440\u0435\u0441\u0441\u0447\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043f\u043e \u0441\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043c\u043d\u043e\u0433\u043e\u043c\u0435\u0440\u043d\u044b\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432, \u0440\u0430\u0441\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043e\u0441\u0435\u0439 \u043c\u0430\u043d\u0434\u0430\u043b\u044b, \u0438 \u043f\u0435\u0440\u0435\u0441\u0441\u0447\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0432 \u043a\u0430\u0436\u0434\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u043a\u0442\u043e\u0440\u0430. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u0432\u0443\u0445 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 getValOnCoordinate<\/strong><\/p>\n
        \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u0437 ListStyle     function getValOnCoordinate(stage, o1, o2, text) {         let strForSearch = String(o1) + \",\" + String(o2);         if (text) {             let o = dataTextMap.get(strForSearch);             return stage.node.children[o];         } else {             let o = dataPolygonMap.get(strForSearch);             return stage.node.children[o];         }     }<\/code><\/pre>\n
    \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b: <\/p>\n
    \"\u0413\u043e\u0442\u043e\u0432\u043e\u0435
    \u0413\u043e\u0442\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/figure>\n
    \u0418\u043d\u0442\u0440\u0435\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b<\/h3>\n
    \u0411\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0434\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u0443\u044e \u0441\u0432\u043e\u0431\u043e\u0434\u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0432\u043e\u0439 \u0432\u043a\u0443\u0441 \u0438 \u0446\u0432\u0435\u0442 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0432\u0430 \u043c\u0435\u043d\u044e: \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432 \u0431\u0430\u0437\u0443, \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b \u0438\u0437\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0445\u0435\u043c\u044b. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0441\u0445\u0435\u043c\u044b \u0438 \u043d\u0435\u043a\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0435\u0433\u043e \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043f\u043e \u043d\u043e\u043c\u0435\u0440\u0430\u043c. \u041f\u0440\u043e\u0448\u0443 \u043d\u0435 \u043f\u0438\u043d\u0430\u0442\u044c, \u0442.\u043a. \u043f\u0440\u043e\u0435\u043a\u0442 \u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043e\u043f\u044b\u0442\u0430, \u0430 \u043d\u0435 \u043f\u043e\u0434\u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043b\u044e\u0434\u044f\u0445. \u0418\u0442\u043e\u0433\u043e: \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b \u0438 \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432 \u0431\u0430\u0437\u0443.<\/p>\n
    \"\u0421\u043a\u0440\u0438\u043d\u044b
    \u0421\u043a\u0440\u0438\u043d\u044b \u043c\u0435\u043d\u044e<\/figcaption><\/figure>\n
    \u0422\u0430\u043a \u0436\u0435 \u043e\u0434\u0438\u043d \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u043b\u0438\u0442\u0440\u0430, \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430\u044f \u0432 Modal. \u0418\u043c\u0435\u0435\u0442\u0441\u044f \u0434\u0432\u0435 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u043d\u0430 \u0432\u044b\u0431\u043e\u0440: \u043e\u0431\u044b\u043d\u0430\u044f \u0438 \u043f\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044e \u0432\u044b\u0431\u043e\u0440 \u0446\u0432\u0435\u0442\u0430 \u0441 \u0440\u0438\u0441\u0443\u043d\u043a\u0430.<\/p>\n
    \"\u041f\u0440\u0438\u043c\u0435\u0440
    \u041f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u044b<\/figcaption><\/figure>\n
    \"\u041f\u0440\u0438\u043c\u0435\u0440
    \u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0441 \u0440\u0438\u0441\u0443\u043d\u043a\u0430<\/figcaption><\/figure>\n
    \u0418 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0448\u043a\u0438 \u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438, \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u0440\u0438\u0441\u0443\u043d\u043a\u0430.<\/p>\n
    \u0412\u0435\u0441\u044c HTML \u043a\u043e\u0434 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 Flask \u0438 \u043e\u0442\u0440\u0430\u0436\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430, \u0442.\u043a. \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0441 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c Bootstrap.<\/p>\n
    \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b<\/h3>\n
    \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u043b\u0430 \u0437\u0430\u0434\u0443\u043c\u043a\u0430 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e SVG \u0444\u0430\u0439\u043b, \u043d\u043e \u0438\u0437-\u0437\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 Corel \u0441\u0430\u043c\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u044b\u043b\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c pdf \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0435\u0433\u043e \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c. <\/p>\n
    \u0421\u0430\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 SVG \u0432 pdf \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435 (\u0441\u0441\u044b\u043b\u043a\u0430<\/a>) \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0447\u0440\u0435\u0437\u0432\u044b\u0447\u0430\u0439\u043d\u043e \u0434\u043e\u043b\u0433\u0438\u043c, \u0442.\u043a. \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0431\u043e\u0440 SVG \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f pdf \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u0449\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 polygon \u0432 \u0444\u0430\u0439\u043b. \u041f\u0440\u043e\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043e\u0442\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u043d\u0430 back-end, \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0442\u0430\u043c \u0438 \u043e\u0442\u0434\u0430\u0442\u044c pdf \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u041e\u0442\u0434\u0430\u0447\u0430 SVG \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 Ajax \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 Cariosvg. \u041f\u043e\u0441\u043b\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 pdf \u043e\u0442\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043e\u0442\u0432\u0435\u0442\u043e\u043c \u043d\u0430 Ajax \u0432 \u0432\u0438\u0434\u0435 \u0431\u0438\u043d\u0430\u0440\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n
    \n\u041a\u043e\u0434 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f svg, \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0432 pdf \u0438 \u043e\u0442\u0434\u0430\u0447\u0430 \u0444\u0430\u0439\u043b\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e<\/summary>\n
    \n
    \/*     * \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f     * *\/      $(\"#getImageSchema\").on('click', function () {         setProgress(false);         for (let i = 0; i < modelMandala.source.drawThisFigure.node.children.length; i++) {             if (modelMandala.source.drawThisFigure.node.children[i].tagName === \"polygon\") {                 modelMandala.source.drawThisFigure.node.children[i].attributes.fill.value = '#ffffff';             }         }         getPdf();     });      $(\"#getImageColor\").on('click', function () {         setProgress(false);         getPdf();     });      function getPdf() {         let dWith = modelMandala.source.pageSize.width * 3.543307;         let dHeight = modelMandala.source.pageSize.height * 3.543307;         let svh = new XMLSerializer().serializeToString(document.getElementById('svgImg2'))         $.ajax({             type: \"POST\",             url: \"\/upload\",             data: {data: svh, pWidth: dWith, pHeight: dHeight},             dataType: 'binary',             xhrFields: {                 'responseType': 'blob'             },         }).done(function (data, status, xhr) {             let link = document.createElement('a'), filename = modelMandala.source.word + '.pdf';             link.href = URL.createObjectURL(data);             link.download = filename;             link.click();             setProgress(true);         });     }<\/code><\/pre>\n
    @app.route('\/upload', methods=['POST']) def upload():     if os.path.exists(uploads_dir + '\\\\test.svg'):         os.remove(uploads_dir + '\\\\test.svg')     if os.path.exists(uploads_dir + '\\\\test.pdf'):         os.remove(uploads_dir + '\\\\test.pdf')     f = open(uploads_dir + '\\\\test.svg', 'w')     f.write(request.form['data'])     f.close()     x = threading.Thread(target=cairosvg.svg2pdf(url=uploads_dir + '\\\\test.svg', write_to=uploads_dir + '\\\\test.pdf'),                          args=(1,))     x.start()     x.join()     return send_file(filename_or_fp=uploads_dir + '\\\\test.pdf', mimetype='application\/pdf; version=\"1.5\"',                      as_attachment=True)<\/code><\/pre>\n<\/div>\n<\/details>\n
    \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 \u0431\u0430\u0437\u044b \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0430 python \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f json \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 modelMandala<\/strong> \u0438 \u0441\u0435\u0440\u0438\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 SVG. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f sqlalchemy \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u0430\u0439\u043b SQLite. <\/p>\n
    \u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u043b\u0436\u043e \u0431\u044b\u043b\u043e \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 powershell \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Fask \u0438 \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0442\u044c, \u043d\u043e…<\/p>\n
    \u041f\u043e\u0441\u043b\u0435\u0441\u043b\u043e\u0432\u0438\u0435<\/h3>\n
    \u041d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044f\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 JS \u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043d\u0430\u0442\u043a\u043d\u0443\u0432\u0448\u0438\u0441\u044c \u043d\u0430 \u043f\u043e\u0441\u0442 <\/a>\u044f \u043e\u0442\u043a\u0440\u044b\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f Electron JS \u0438 \u043f\u043e\u0434\u0443\u043c\u0430\u043b: \u0430 \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u0442\u044c pyinstaller \u0438 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 Electron \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0437\u0430\u043f\u0443\u0441\u043a \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 python, \u0430 \u043f\u0440\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 \u043e\u043a\u043d\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0443? \u0414\u043b\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u044d\u0442\u043e \u0443\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 python \u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 powershell. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0442\u0430\u043a \u0438 \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e. \u041d\u0438\u0436\u0435 \u0444\u0430\u0439\u043b render.js \u0434\u043b\u044f electron \u0438 package.json \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n
    \n<\/summary>\n
    \n
    \nrender.js<\/summary>\n
    \n
    \"use strict\";  const {app, BrowserWindow, session, Menu, MenuItem} = require(\"electron\"); const path = require(\"path\"); let mainWindow = null; let subpy = null;  const PY_DIST_FOLDER = \"dist-python\";  const PY_SRC_FOLDER = \"web_app\";  const PY_MODULE = \"wsgi.py\";   const isRunningInBundle = () => {     return require(\"fs\").existsSync(path.join(__dirname, PY_DIST_FOLDER)); };  const getPythonScriptPath = () => {     if (!isRunningInBundle()) {         return path.join(__dirname, PY_SRC_FOLDER, PY_MODULE);     }     if (process.platform === \"win32\") {         return path.join(             __dirname,             PY_DIST_FOLDER,             PY_MODULE.slice(0, -3) + \".exe\"         );     }     return path.join(__dirname, PY_DIST_FOLDER, PY_MODULE); };  const startPythonSubprocess = () => {     let script = getPythonScriptPath();     if (isRunningInBundle()) {         subpy = require(\"child_process\").execFile(script, []);     } else {         subpy = require(\"child_process\").spawn(\"python\", [script]);     } };  const killPythonSubprocesses = main_pid => {     const python_script_name = path.basename(getPythonScriptPath());     let cleanup_completed = false;     const psTree = require(\"ps-tree\");     psTree(main_pid, function (err, children) {         let python_pids = children             .filter(function (el) {                 return el.COMMAND == python_script_name;             })             .map(function (p) {                 return p.PID;             });         python_pids.forEach(function (pid) {             process.kill(pid);         });         subpy = null;         cleanup_completed = true;     });     return new Promise(function (resolve, reject) {         (function waitForSubProcessCleanup() {             if (cleanup_completed) return resolve();             setTimeout(waitForSubProcessCleanup, 30);         })();     }); }; const createMainWindow = () => {     mainWindow = new BrowserWindow({         width: 1366,         height: 768,         icon: __dirname + \"\/icon.ico\",         fullscreen: true,         frame: true,         resizeable: true     });     mainWindow.loadURL(\"http:\/\/localhost:5000\/\");     mainWindow.on(\"closed\", function () {         mainWindow = null;     }); }; app.on(\"ready\", function () {     startPythonSubprocess();     createMainWindow();     setTimeout(()=>{        mainWindow.loadURL(\"http:\/\/localhost:5000\/\");     }, 5); }); const template = [     {         role: 'Help',         submenu: [             {                 role: 'reload'             },             {                 role: 'close'             }         ]     } ] const menu = Menu.buildFromTemplate(template) app.on(\"browser-window-created\", function (e, window) {     window.setMenu(menu); }); app.on(\"window-all-closed\", () => {     if (process.platform !== \"darwin\") {         let main_process_pid = process.pid;         killPythonSubprocesses(main_process_pid).then(() => {             app.quit();         });     } });  app.on(\"activate\", () => {     if (subpy == null) {         startPythonSubprocess();     }     if (mainWindow === null) {         createMainWindow();     } });  app.on(\"quit\", function () {     session.defaultSession.clearCache(); }); <\/code><\/pre>\n<\/div>\n<\/details>\n
    \npackage.json \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/summary>\n
    \n
    {   \"name\": \"MandalaApp\",   \"version\": \"1.2.0\",   \"description\": \"\",   \"main\": \"renderer.js\",   \"scripts\": {     \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",     \"start\": \"electron .\",     \"package\": \"npm run -s package-python && npm run -s package-electron && npm run -s package-cleanup\",     \"package-python\": \"pyinstaller -w --onefile --add-binary web_app\/venv\/Lib\/site-packages\/cairosvg;cairosvg --add-binary web_app\/venv\/Lib\/site-packages\/cairocffi;cairocffi --add-binary web_app\/venv\/Lib\/site-packages\/PIL;pillow --add-binary web_app\/venv\/Lib\/site-packages\/defusedxml;defusedxml --add-binary web_app\/venv\/Lib\/site-packages\/tinycss2;tinycss2 --add-binary web_app\/venv\/Lib\/site-packages\/cssselect2;cssselect2 --add-binary web_app\/venv\/Lib\/site-packages\/cffi;cffi --add-binary web_app\/venv\/Lib\/site-packages\/pycparser;pycparser --add-binary web_app\/venv\/Lib\/site-packages\/webencodings;webencodings --add-data web_app\/templates;templates --add-data web_app\/static;static --add-data web_app\/instance;instance --add-data web_app\/migrations;migrations --add-data web_app\/instance\/app.db;instance web_app\/wsgi.py web_app\/app.py web_app\/config.py web_app\/identifier.sqlite web_app\/models.py web_app\/routes.py --distpath dist-python\",     \"package-electron\": \"electron-builder\"   },   \"build\": {     \"appId\": \"com.MandalaApp.klim-app\",     \"productName\": \"MandalaApp\",     \"asar\": false,     \"asarUnpack\": [       \"**\/*.node\"     ],     \"mac\": {       \"category\": \"public.app-category.utilities\"     },     \"files\": [       \"renderer.js\",       \"icon.ico\",       \"node_modules\/**\/*\"     ],     \"extraResources\": [       {         \"from\": \"dist-python\/\",         \"to\": \"app\/dist-python\",         \"filter\": [           \"**\/*\"         ]       }     ]   },   \"author\": \"Ilia Klimchik https:\/\/github.com\/klimchak\",   \"license\": \"MIT\",   \"dependencies\": {     \"ps-tree\": \"^1.2.0\"   },   \"devDependencies\": {     \"electron\": \"^9.2.0\",     \"electron-builder\": \"^22.8.0\"   } } <\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n<\/details>\n
    \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0432\u0441\u0435\u043c \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u0433\u043e\u0432\u043e\u0440\u0435\u043d\u043d\u044b\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c.<\/p>\n
    \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u043e\u0434 \u043c\u043e\u0436\u043d\u043e \u043d\u0430 GitHub<\/a>.<\/p>\n
    P.s. \u041f\u0440\u043e\u0448\u0443 \u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043c\u043d\u044f\u043c\u0438. \u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0438\u0432\u043d\u043e\u0439 \u043a\u0440\u0438\u0442\u0438\u043a\u0435, code review, \u0441\u043e\u0432\u0435\u0442\u0430\u043c \u043f\u043e \u0438\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0442\u0430\u043a \u0436\u0435 \u043f\u043e \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044e \u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0432 web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
    <\/div>\n

     \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438      https:\/\/habr.com\/ru\/articles\/569716\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    <\/div>\n
    \n
    \n
    \n
    \n
    \u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a! \u042d\u0442\u043e \u043c\u043e\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0441\u0442 \u043d\u0430 \u0425\u0430\u0431\u0440\u0435 \u0432 \u0440\u0430\u0441\u0447\u0435\u0442\u0435 \u043d\u0430 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043a\u0440\u0438\u0442\u0438\u043a\u0443 \u0438 \u0441\u043e\u0432\u0435\u0442\u044b \u043d\u0430 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435.<\/p>\n
    \u041f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u044f<\/h3>\n
    \u042f \u043e\u0431\u0443\u0447\u0430\u044e\u0441\u044c \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u043e \u043c\u043d\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0430\u0441\u044c \u0437\u043d\u0430\u043a\u043e\u043c\u0430\u044f \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433 \u0438 \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b\u0430: <\/p>\n
    \n
    \u041d\u0435 \u043c\u043e\u0433 \u043b\u0438 \u0431\u044b \u0442\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u043c\u0430\u043d\u0434\u0430\u043b?<\/p>\n<\/blockquote>\n
    \u0418 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443:<\/p>\n
      \n
    1. \n
      \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0441\u043b\u043e\u0432\u0430 \u0432 \u0446\u0438\u0444\u0440\u044b \u043f\u043e \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u0443;<\/p>\n<\/li>\n
    2. \n
      \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c \u0432 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0446\u0438\u0444\u0440 \u043f\u0435\u0440\u0435\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0433\u0440\u0430\u043d\u0438 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0445\u043e\u043b\u0441\u0442\u0430;<\/p>\n<\/li>\n
    3. \n
      \u0440\u0430\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0446\u0438\u0444\u0440 \u0432 \u043a\u0430\u0436\u0434\u0443\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u043f\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u0443;<\/p>\n<\/li>\n
    4. \n
      \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0432\u043e \u0432\u0441\u0435\u0445 \u044f\u0447\u0435\u0439\u043a\u0430\u0445 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043d\u043e\u043c\u0435\u0440\u043e\u043c;<\/p>\n<\/li>\n
    5. \n
      \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0431\u043e\u0440\u0430 \u0446\u0432\u0435\u0442\u0430 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n
    6. \n
      \u0432\u044b\u0432\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f;<\/p>\n<\/li>\n
    7. \n
      \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0439 \u043c\u0430\u043d\u0434\u0430\u043b\u0435 \u0434\u043b\u044f \u0435\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<\/li>\n<\/ol>\n
      \u0414\u043b\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u043c\u043d\u0435  \u044d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u043c \u043a\u0435\u0439\u0441\u043e\u043c. \u042f \u0432\u0437\u044f\u043b\u0441\u044f \u0437\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u043f\u0440\u0438\u043d\u044f\u043b\u0441\u044f \u043e\u0431\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0435\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c. \u0421\u0440\u0430\u0437\u0443 \u043d\u0430 \u0443\u043c \u043f\u0440\u0438\u0448\u043b\u043e: PyQt 5, \u043a\u043d\u0438\u0433\u0443 \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043d\u0435 \u0437\u0430\u0431\u043e\u0442\u043b\u0438\u0432\u043e \u043f\u043e\u0434\u0430\u0440\u0438\u043b\u0438 \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434, \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. PyQt 5 \u044f \u043d\u0435 \u0437\u043d\u0430\u044e, \u0434\u0430 \u0438 \u043d\u0435 \u043c\u043e\u044f \u0441\u0444\u0435\u0440\u0430 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f, \u0430 \u043f\u043e\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0443 \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0431 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u0431\u0435\u043a\u0435\u043d\u0434\u0430 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d Flask, \u0442.\u043a. \u043e\u0434\u0438\u043d \u0438\u0437 \u043a\u0435\u0439\u0441\u043e\u0432 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u044f \u0431\u044b\u043b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Salesforce \u0441 Telegram \u0431\u043e\u0442\u043e\u043c (\u0414\u0430. \u042f \u043e\u0431\u0443\u0447\u0430\u044e\u0441\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 Salesforce) \u0438 Flask \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u0433\u0438\u0431\u043a\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c. \u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 Bootstrap \u0438 JQuery. <\/p>\n
      \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0443 \u043c\u043e\u0435\u0433\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u0433\u043e \u043f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0430 \u043d\u0435\u0442 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Photoshop \u0438\u043b\u0438 CorelDraw, \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0431\u0435\u043a\u0435\u043d\u0434, \u0441\u043a\u0440\u0438\u043f\u0442 Powershell \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f Python \u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0434\u0440\u0435\u0441. <\/p>\n
      \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0441\u043b\u0430\u043d\u043d\u043e\u0435 \u043c\u043d\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u0440\u0430\u0441\u0447\u0435\u0442\u0443 \u043c\u0430\u043d\u0434\u0430\u043b\u044b.<\/p>\n
      \n<\/summary>\n
      \n
      \u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0432\u0430 \u043f\u043e \u0433\u0440\u0430\u043d\u0438<\/figcaption><\/figure>\n
      \u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0432\u0430 \u043f\u043e \u043b\u0443\u0447\u0430\u043c<\/figcaption><\/figure>\n<\/div>\n<\/details>\n
      \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h3>\n
      \u041a\u0430\u043a \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438? \u041f\u0440\u043e\u0432\u0435\u0434\u044f \u043f\u043e\u0438\u0441\u043a \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0442\u044c\u044e<\/a>. \u041f\u0440\u043e\u0439\u0434\u044f \u043a \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0443, \u043d\u0430\u0448\u0435\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. <\/p>\n
      \u042d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f JS, \u043f\u0435\u0440\u0432\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043d\u0430 Canvas, \u0441\u0435\u0442\u043a\u0443 \u0432\u044b\u0432\u043e\u0434\u0438\u043b\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 Honeycomb<\/a>. <\/p>\n
      \n\u0414\u043b\u0438\u043d\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430<\/summary>\n
      \n
      function buildMandalaVer12(countHex, strToHex) {     var element = document.getElementById(\"stage\");     element.height = window.innerHeight;     element.width = window.innerWidth;     var stage = new createjs.Stage(\"stage\");     stage.x = window.innerWidth \/ 2;     stage.y = window.innerHeight \/ 2;     var grid = new Grid();     grid.tileSize = 30;     grid.tileSpacing = 0;     grid.pointyTiles = false;     var stageTransformer = new StageTransformer().initialize({         element: element,         stage: stage     });     stageTransformer.addEventListeners();     var coordinates = grid.hexagon(0, 0, countHex, true);     let breakIter = false;     let stepRay = 0;     let stepBreak = 0;     let interimStep = 0;     let u = 1;     for (var i = 0; i < coordinates.length; i++) {         var q = coordinates[i].q,             r = coordinates[i].r,             center = grid.getCenterXY(q, r),             hexagon = new createjs.Shape();         if (u == stepBreak){             breakIter = false;             u = 0;         }         if (!breakIter) {             let str = strToHex[stepRay];             var text = new createjs.Text(str, \"10px Arial\", \"#ff7700\");             text.textBaseline = \"alphabetic\";             text.set({                 textAlign: \"center\",                 textBaseline: \"middle\",                 x: center.x,                 y: center.y,                 rotation: -90             });             if (stepRay > 0) {                 interimStep += 1;             }         }         if (interimStep == 6) {             breakIter = true;             interimStep = 1;             stepBreak += 1;         } else {             u += 1;         }         if (i + 1 == 1) {             stepRay = 1         }         hexagon.id = i;         hexagon.id2 = i;         \/\/ \u0440\u0430\u0441\u043a\u0430\u0441\u043a\u0430 \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439         if ((q == 0 && r == 0) || q == 0 || r == 0 || ((q * -1) == r)) {             hexagon.graphics                 .beginFill(\"rgba(150,0,0,1)\")                 \/\/ .beginFill(\"rgba(150,150,150,1)\")                 .beginStroke(\"rgba(250,250,250,1)\")                 .drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);         } else {             hexagon.graphics                 .beginFill(\"rgba(150,150,150,1)\")                 .beginStroke(\"rgba(250,250,250,1)\")                 .drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);         }         hexagon.q = q;         hexagon.r = r;         hexagon.x = center.x;         hexagon.y = center.y;         hexagon.addEventListener(\"click\", function (event) {             if (!stageTransformer.mouse.moved) {                 console.log(event.target.id)                 event.target.graphics                     .clear()                     .beginFill(\"rgba(150,0,0,1)\")                     .beginStroke(\"rgba(50,0,0,1)\")                     .drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);             }         });         stage.addChild(hexagon);         stage.addChild(text);     }     stage.set({         rotation: 90     });     var tick = function (event) {         stage.update();     };     tick();     createjs.Ticker.setFPS(60);     createjs.Ticker.addEventListener(\"tick\", tick);     return true; }<\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0432 SVG \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u0438\u043b\u043b\u0438\u043c\u0435\u0442\u0440\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438. \u041d\u0430 developer.mozilla.org \u0441\u043a\u0430\u0437\u0430\u043d\u043e:<\/p>\n
      https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Tutorial\/Positions<\/figcaption><\/figure>\n
      \u041e\u043a. \u0417\u043d\u0430\u0447\u0438\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432\u0432\u043e\u0434\u0438\u043c\u044b\u0435 \u0432 \u0444\u043e\u0440\u043c\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0441\u0435\u0442\u043a\u0438.<\/p>\n
      \n\u041a\u043e\u0434 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0435\u0442\u043a\u0438<\/summary>\n
      \n
          let preload = document.getElementById('preloader');     \/\/ \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u043c\u043c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u0438     let dWith = modelMandala.source.pageSize.width * 3.543307;     let dHeight = modelMandala.source.pageSize.height * 3.543307;     let dRangeMm = modelMandala.source.rangeMm * 3.543307;     \/\/ \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0441\u0435\u0442\u043a\u0438 \u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442     let options = new BHex.Drawing.Options(dRangeMm, BHex.Drawing.Static.Orientation.PointyTop, new BHex.Drawing.Point(dWith, dHeight));     let gridBHex = new BHex.Grid(modelMandala.source.countWord);     let gridForPaint = new BHex.Drawing.Drawing(gridBHex, options);<\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0430\u043c\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e SVG.js \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 Polygon \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 Text \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u043e\u0441\u0442\u0438.<\/p>\n
      \n<\/summary>\n
      \n
      \/\/ \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 svg \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0435\u0433\u043e \u0432 <object> \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435     modelMandala.source.drawThisFigure = SVG().addTo(preload).size(dWith, dHeight).id(\"svgImg2\");     document.getElementById(\"svgImg2\").setAttribute('style', 'shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd');     let fontSize = modelMandala.source.rangeFontSize;     \/\/ \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Text     for (let i = 0; i < gridForPaint.grid.hexes.length; i++) {         modelMandala.source.drawThisFigure.polygon(gridForPaint.grid.hexes[i].points.map(({x, y}) => `${x},${y}`))             .fill('none')             .stroke({width: 1, color: '#000000'})             .css({cursor: 'pointer'})             .addClass('polygon')             .addClass('999')             .addClass(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)             .element('title').words(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)         modelMandala.source.drawThisFigure             .text(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)             .font({                 size: fontSize,                 anchor: 'middle',                 leading: 1.4,                 fill: modelMandala.source.colorWord             })             .addClass(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)             .translate(gridForPaint.grid.hexes[i].center.x, gridForPaint.grid.hexes[i].center.y + 3);     }<\/code><\/pre>\n<\/div>\n<\/details>\n
      \u0418 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u0441 \u043f\u0430\u043b\u0438\u0442\u0440\u043e\u0439.<\/p>\n
      \n<\/summary>\n
      \n
      for (let i = 0; i < modelMandala.source.drawThisFigure.node.children.length; i++) {         if (modelMandala.source.drawThisFigure.node.children[i].tagName === \"polygon\") {             let str = modelMandala.source.drawThisFigure.node.children[i].classList[2];             dataPolygonMap.set(str, i);             modelMandala.source.drawThisFigure.node.children[i].onclick = function () {                 SetColorPolygonFunc();                 polygonObj = modelMandala.source.drawThisFigure.node.children[i];             }         }         if (modelMandala.source.drawThisFigure.node.children[i].tagName === \"text\") {             let str = modelMandala.source.drawThisFigure.node.children[i].classList[0];             dataTextMap.set(str, i);         }  }<\/code><\/pre>\n<\/div>\n<\/details>\n
      \u041d\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e,\u0430 \u043b\u0438\u0448\u044c \u0447\u0430\u0441\u0442\u044c\u044e.<\/p>\n
      \u0413\u043e\u0442\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u0434\u0432\u0438\u0433\u043e\u043c<\/figcaption><\/figure>\n
      \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u0442\u0430\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0440\u0430\u0441\u0441\u0447\u0435\u0442 \u0438\u0434\u0435\u0442 \u043e\u0442 \u0446\u0435\u043d\u0442\u0440\u0430 (\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b 0,0), \u0430 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 SVG \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c Viewbox = «0 0 0 0». \u041e\u043a. \u0414\u0435\u043b\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0441\u0435\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430 \u043d\u0430 -2.<\/p>\n
      modelMandala.source.drawThisFigure.viewbox(dWith \/ -2 + ' ' + dHeight \/ -2 + ' ' + dWith + ' ' + dHeight);<\/code><\/pre>\n
      \u0414\u0430\u043b\u0435\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0440\u0430\u0441\u0441\u0447\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\u0445. \u0423\u0441\u043b\u043e\u0432\u043d\u043e \u0432\u0441\u044e \u043c\u0430\u043d\u0434\u0430\u043b\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0448\u0435\u0441\u0442\u044c \u0441\u0435\u043a\u0442\u043e\u0440\u043e\u0432. \u041c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0441\u0435\u0442\u043a\u0438, \u0438\u0445 \u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b \u0432 \u0432\u0438\u0434\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e polygon, \u0438 \u043d\u0430 \u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0440\u0430\u0441\u0441\u0447\u0435\u0442 \u043a\u0430\u043a \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435: \u0431\u0435\u0440\u0435\u043c \u0434\u0432\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0446\u0438\u0444\u0440\u044b \u0432 \u043d\u0438\u0445 \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0438 \u0442\u0430\u043a \u0434\u043e \u043a\u043e\u043d\u0446\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 event \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b \u0435\u0433\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432 Map, \u0441\u0430\u043c SVG \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0430 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0441\u0441\u0447\u0435\u0442\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u043a\u0442\u043e\u0440\u0430.<\/p>\n
      \n<\/summary>\n
      \n
      \/\/ \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u044b let modelMandala = {     rayA: {         rayCoord: [],         sector: []     },     rayB: {         rayCoord: [],<\/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-408535","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/408535","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=408535"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/408535\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=408535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=408535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=408535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}