{"id":328514,"date":"2022-01-24T15:00:59","date_gmt":"2022-01-24T15:00:59","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=328514"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=328514","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Art-pixel \u043d\u0430 Angular \u0438 Nest.js. \u0427\u0430\u0441\u0442\u044c 1<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u0433\u0430\u043b\u0435\u0440\u0435\u0435, \u043f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u0442\u044c \u0437\u0430 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0432\u0448\u0443\u044e\u0441\u044f. \u0412\u043e\u043e\u0431\u0449\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0431\u043b\u043e\u0433, \u0433\u0430\u043b\u0435\u0440\u0435\u044f \u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0430\u044f. \u041c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c Angular \u0438 \u043f\u0440\u043e\u0431\u0443\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u0438 \u043d\u0430\u0431\u0438\u0442\u044c \u0440\u0443\u043a\u0443.\u00a0\u00a0<\/p>\n

\u042d\u0442\u043e \u043c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044f \u0431\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0435\u0435 \u043d\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043b, \u043d\u043e \u043c\u043e\u0451 \u043b\u0443\u0437\u0435\u0440\u0441\u0442\u0432\u043e \u0438 \u043f\u0440\u0438\u0432\u044b\u0447\u043a\u0430 \u0431\u044b\u0442\u044c \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u043c, \u043c\u0435\u043d\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0441\u043a\u0440\u0435\u043f\u043e\u0441\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u044f \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e \u043f\u043e\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u043e\u0435. \u0410\u043c\u0431\u0438\u0446\u0438\u0439 \u043d\u0435\u0442, \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0439\u0444 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u0434\u0435\u043b\u0430\u044e, \u043b\u044e\u0431\u043b\u044e \u0441\u043e\u0437\u0435\u0440\u0446\u0430\u0442\u044c, \u043b\u044e\u0431\u043b\u044e \u0447\u0442\u043e \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c. \u0420\u0430\u0434 \u0431\u0443\u0434\u0443 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043a\u043e\u043c\u0443 \u0442\u043e \u043f\u0440\u0438\u043d\u0435\u0441\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u0443. \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u043f\u0440\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u0432\u0441\u0435 \u043d\u0435 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e \u0438 \u044f \u043d\u0430\u0439\u0434\u0443 \u0432 \u0441\u0435\u0431\u0435 \u0441\u0438\u043b\u044b \u0432\u044b\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0447\u0430\u0441\u0442\u0438.<\/p>\n

\u0410 \u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u043c\u0443 \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u0435\u043c\u043e \u043d\u0438\u0436\u0435.<\/p>\n

\u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Angular, CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0442\u00a0 w3schools<\/a><\/p>\n

\u0418\u0442\u0430\u043a, \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439.<\/p>\n

<\/figcaption><\/figure>\n

\u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c Demo<\/a>, \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u0434<\/a>.<\/p>\n

\u0418\u0434\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0410\u043d\u0433\u0443\u043b\u0430\u0440. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. <\/p>\n

\u041f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0443\u043c\u0435\u0435\u0442\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u044d\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c.<\/p>\n

\u041d\u0430\u0448\u0430 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f.<\/p>\n

\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u0430\u043d\u0434:<\/p>\n

ng g m canvas<\/strong><\/p>\n

ng g c canvas\/components\/main-canvas —module canvas.module<\/strong><\/p>\n

ng g c canvas\/components\/left-panel —module canvas.module<\/strong><\/p>\n

ng g c canvas\/components\/canvas —module canvas.module<\/strong><\/p>\n

ng g c canvas\/components\/form —module canvas.module<\/strong><\/p>\n

\u0413\u0434\u0435 main-canvas<\/strong> \u0443 \u043d\u0430\u0441 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 left-panel, canvas, form<\/strong>.<\/p>\n

\u0421\u043e\u0437\u0434\u0430\u0435\u043c component main-canvas<\/p>\n

code main-canvas.component.html<\/p>\n

<!DOCTYPE html> <html> <title>W3.CSS Template<\/title> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <link rel=\"stylesheet\" href=\"https:\/\/www.w3schools.com\/w3css\/4\/w3.css\"> <link rel='stylesheet' href='https:\/\/fonts.googleapis.com\/css?family=Roboto'> <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"> <style>  html,  body,  h1,  h2,  h3,  h4,  h5,  h6 {    font-family: \"Roboto\", sans-serif  } <\/style> <div class=\"w3-bar w3-light-grey\">  <h1 style=\"padding-left: 2rem;\">ARTpixel<\/h1> <\/div>   <body class=\"w3-light-grey\">  <!-- Page Container -->  <div class=\"w3-content w3-margin-top\" style=\"max-width:1400px;\">    <!-- The Grid -->    <div class=\"w3-row-padding\">      <!-- Right Column -->      <!-- Left Column -->      <app-left-panel (pagesEvent)=\"getDataPanel($event)\"><\/app-left-panel>      <!-- End Left Column -->      <div class=\"w3-twothird\">        <div class=\"w3-container w3-card w3-white w3-margin-bottom\">          <h2 class=\"w3-text-grey w3-padding-16\"><i              class=\"fa fa-paint-brush fa-fw w3-margin-right w3-xxlarge w3-text-teal\"><\/i>\u041f\u043e\u043b\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f          <\/h2>          <div class=\"w3-container\">            <app-canvas [uploadSuccess]=\"uploadSuccess\"><\/app-canvas>            <hr>          <\/div>        <\/div>        <\/div>      <!-- End Right Column -->    <\/div>    <!-- End Grid -->  <\/div>    <!-- End Page Container -->    <footer class=\"w3-container w3-teal w3-center w3-margin-top\">    <p>Find me on social media.<\/p>    <i class=\"fa fa-facebook-official w3-hover-opacity\"><\/i>    <i class=\"fa fa-instagram w3-hover-opacity\"><\/i>    <i class=\"fa fa-snapchat w3-hover-opacity\"><\/i>    <i class=\"fa fa-pinterest-p w3-hover-opacity\"><\/i>    <i class=\"fa fa-twitter w3-hover-opacity\"><\/i>    <i class=\"fa fa-linkedin w3-hover-opacity\"><\/i>    <p>Powered by <a href=\"https:\/\/www.w3schools.com\/w3css\/default.asp\" target=\"_blank\">w3.css<\/a><\/p>  <\/footer> <\/body>   <\/html> <\/code><\/pre>\n
code main-canvas.component.ts<\/p>\n
import { Component, EventEmitter } from '@angular\/core'; import { FormGroup } from '@angular\/forms';   @Component({  selector: 'app-main-canvas',  templateUrl: '.\/main-canvas.component.html',  styleUrls: ['.\/main-canvas.component.scss'] }) export class MainCanvasComponent {  uploadSuccess: EventEmitter<any> = new EventEmitter();\/\/\u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438    constructor() { }    getDataPanel($event: FormGroup) {    const data = {      widthRect: Number($event.value.widthCanvas),      heightRect: Number($event.value.heightCanvas),      numberOf: Number($event.value.hwPixel),      borderRow: $event.value.meshThickness,      numberRow: Number($event.value.hwPixel) + Number($event.value.meshThickness),      innerWidth: Number($event.value.heightCanvas) * (Number($event.value.hwPixel) + Number($event.value.meshThickness)),      innerHeight: Number($event.value.widthCanvas) * (Number($event.value.hwPixel) + Number($event.value.meshThickness)),      colorfillStyle: $event.value.colorFone    }      this.uploadSuccess.emit(data);\/\/\u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438  } } <\/code><\/pre>\n
\u041f\u043e\u043a\u0430 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0443 \u043d\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 left-panel \u00a0<\/p>\n
<app-left-panel (pagesEvent)=\"getDataPanel($event)\"><\/app-left-panel><\/code><\/pre>\n
\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0438\u0445 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 form\u00a0 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0438\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 canvas <\/p>\n
<app-canvas [uploadSuccess]=\"uploadSuccess\"><\/app-canvas> <\/code><\/pre>\n
\u0433\u0434\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445\u00a0 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u0438\u0441\u0443\u043d\u043a\u0430.\u00a0<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u00a0 left-panel\u00a0<\/p>\n
left-panel.cpmponent.html<\/strong><\/p>\n
<div class=\"w3-third\">    <div class=\"w3-white w3-text-grey w3-card-4\">        <div class=\"w3-container\">            <p class=\"w3-large\"><b><i class=\"fa fa-asterisk fa-fw w3-margin-right w3-text-teal\"><\/i>\u0424\u043e\u0440\u043c\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0445\u043e\u043b\u0441\u0442\u0430<\/b><\/p>            <div class=\"w3-light-grey w3-round-xlarge w3-small\">                <app-form                (pagesEvent)=\"getData($event)\"                ><\/app-form>            <\/div>            <hr>        <\/div>    <\/div><br> <\/div> <\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u00a0 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0444\u043e\u0440\u043c<\/p>\n
<app-form(pagesEvent)=\"getData($event)\"><\/app-form><\/code><\/pre>\n
left-panel.component.ts<\/strong><\/p>\n
import { Component, EventEmitter, Output } from '@angular\/core'; import { FormGroup } from '@angular\/forms';   @Component({  selector: 'app-left-panel',  templateUrl: '.\/left-panel.component.html',  styleUrls: ['.\/left-panel.component.scss'] }) export class LeftPanelComponent {    @Output() pagesEvent: EventEmitter<FormGroup > =    new EventEmitter< FormGroup >();  constructor() { }  getData($event: FormGroup) {    this.pagesEvent.emit($event);  } } <\/code><\/pre>\n
\u0421\u0435\u0439\u0447\u0430\u0441 \u0443 \u043d\u0430\u0441 \u0437\u0434\u0435\u0441\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 getData()<\/strong> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u0444\u043e\u0440\u043c\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432 \u043a\u0430\u043d\u0432\u0430\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n
\u00a0\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 form.\u00a0\u00a0<\/p>\n
form.component.html<\/strong><\/p>\n
<form [formGroup]=\"form\" class=\"w3-container\">  <p>    \u0425\u043e\u043b\u0441\u0442  <\/p>  <label>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438<\/label>  <input class=\"w3-input\" type=\"number\" name=\"widthCanvas\" formControlName=\"widthCanvas\">    <label>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/label>  <input class=\"w3-input\" type=\"number\" name=\"heightCanvas\" formControlName=\"heightCanvas\">  <p>    Pixel  <\/p>  <label>\u0420\u0430\u0437\u043c\u0435\u0440 \u043f\u0438\u043a\u0441\u0435\u043b\u044f<\/label>  <input class=\"w3-input\" type=\"number\" name=\"hwPixel\" formControlName=\"hwPixel\">  <label>\u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u0441\u0435\u0442\u043a\u0438<\/label>  <input class=\"w3-input\" type=\"number\" name=\"meshThickness\" formControlName=\"meshThickness\">  <label>\u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u0445\u043e\u043b\u0441\u0442\u0430<\/label>  <input class=\"w3-input w3-border 0 input-color\" type=\"color\" name=\"colorFone\" formControlName=\"colorFone\">  <hr>    <div class=\"form-group\">    <button class=\"w3-button w3-pale-red\" (click)=\"onCreate()\">      \u0421\u043e\u0437\u0434\u0430\u0442\u044c    <\/button>  <\/div>  <div>    <hr>  <\/div>   <\/form> <\/code><\/pre>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c form.component.ts<\/strong><\/p>\n
import { Component, EventEmitter, OnInit, Output } from '@angular\/core'; import { FormControl, FormGroup, Validators } from '@angular\/forms';   @Component({  selector: 'app-form',  templateUrl: '.\/form.component.html',  styleUrls: ['.\/form.component.scss'] }) export class FormComponent implements OnInit {    @Output() pagesEvent: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();  constructor() { }    form: FormGroup = new FormGroup(    {      \"heightCanvas\": new FormControl(\"24\", Validators.required),      \"widthCanvas\": new FormControl(\"24\", Validators.pattern(\"[0-9]{10}\")),      \"hwPixel\": new FormControl(\"10\", Validators.required),      \"meshThickness\": new FormControl(\"1\", Validators.pattern(\"[0-9]{10}\")),      \"colorFone\": new FormControl(\"green\"),    }  );     onCreate(): void {    this.pagesEvent.emit(this.form);  } }   <\/code><\/pre>\n
\u0438 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u044f\u0434\u0440\u0430 canvas.component<\/p>\n
canvas.component.html<\/strong><\/p>\n
<div class=\"w3-card-4\">  <div class=\"w3-container w3-center\">    <label for=\"colorWell\"><\/label>    <input list=\"\" id=\"colorWell\" type=\"color\" name=\"colorRect\" [(ngModel)]=\"colorRect\">    <button (click)=\"create()\">\u0412\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0440\u0438\u0441\u0443\u043d\u043e\u043a<\/button>    <button (click)=\"clearPixel()\">\u0417\u0430\u0434\u0430\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044e \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430<\/button>    <\/div> <\/div> <div class=\"w3-card-4 layer\">  <div class=\"w3-container w3-center\">    <canvas id=\"canvas\" #canvas><\/canvas>  <\/div> <\/div> <\/code><\/pre>\n
canvas.component.ts<\/strong><\/p>\n
import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Renderer2, ViewChild } from '@angular\/core'; import { FormGroup } from '@angular\/forms';   @Component({  selector: 'app-canvas',  templateUrl: '.\/canvas.component.html',  styleUrls: ['.\/canvas.component.scss'] }) export class CanvasComponent implements AfterViewInit, OnInit {  canvas: HTMLCanvasElement;  innerWidth: number;  innerHeight: number;  rendererRef: any;  numberRow: number;  numberOf = 10;  borderRow = 1;  widthRect = 50;  heightRect = 50;  x = 0;  y = 0  canvasX: number \/\/ X click cordinates  canvasY: number \/\/ Y click cordinates  colorRect = '#242323';\/\/\u0446\u0432\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043b\u043a\u0438  colorfillStyle = '#19a923';\/\/\u0446\u0432\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0445\u043e\u043b\u0441\u0442\u0430  matr = { numberOf: 10, backgroundColor: '#19a923', data: [{ x: 0, y: 0, color: '' }] }    private ctx: CanvasRenderingContext2D | null;  @ViewChild('canvas') canvasRef: ElementRef;    constructor(private el: ElementRef,    private renderer: Renderer2,  ) {    this.numberRow = this.numberOf + this.borderRow;    this.innerWidth = this.heightRect * this.numberRow;    this.innerHeight = this.widthRect * this.numberRow;  }    onResize(data: any) {    this.innerWidth = data.innerWidth;    this.innerHeight = data.innerHeight;    this.widthRect = data.widthRect;    this.heightRect = data.heightRect;    this.numberOf = data.numberOf;    this.borderRow = data.borderRow;    this.numberRow = data.numberRow;    this.canvas.width = this.innerWidth;    this.canvas.height = this.innerHeight    this.colorfillStyle = data.colorfillStyle;    this.cleardraw()    this.draw()  } @Input() uploadSuccess: EventEmitter<FormGroup>;    ngOnInit(): void {    this.uploadSuccess.subscribe(data => {      this.onResize(data);    });  }  ngAfterViewInit(): void {    this.canvas = this.canvasRef.nativeElement;    this.canvas.width = this.innerWidth;    this.canvas.height = this.innerHeight;    let image = document.getElementById('source');    this.cleardraw()    this.draw();    const data = this.canvas?.toDataURL();      if (this.rendererRef != null) {      this.rendererRef();    }      this.rendererRef = this.renderer.listen(this.canvasRef.nativeElement, 'click', (event) => {      let cX = event.layerX;      let cY = event.layerY;      const offsetLeft = this.canvasRef.nativeElement.offsetLeft;      const offsetTop = this.canvasRef.nativeElement.offsetTop;      this.canvasX = cX - offsetLeft;      this.canvasY = cY - offsetTop;      this.matr.data.map(data => {        if (cX >= data.x && cX < data.x + this.numberOf && cY >= data.y && cY < data.y + this.numberOf) {          this.ctx.fillStyle = this.colorRect;          this.ctx.fillRect(data.x, data.y, this.numberOf, this.numberOf);          data.color = this.colorRect;        }      })      localStorage.setItem('matr', JSON.stringify(this.matr));      const data = this.canvas?.toDataURL();    })  }    draw(): void {    this.matr.backgroundColor = this.colorfillStyle;    this.matr.numberOf = this.numberOf;    for (let i = 0; i < this.heightRect; i++) {      for (let j = 0; j < this.widthRect; j++) {        this.ctx.fillStyle = this.colorfillStyle;        this.ctx.fillRect(j * this.numberRow, i * this.numberRow, this.numberOf, this.numberOf);        this.matr.data.push({ x: j * this.numberRow, y: i * this.numberRow, color: this.colorfillStyle })      }    }    }    cleardraw(): void {    this.ctx = this.canvas.getContext('2d');    this.ctx.clearRect(0, 0, this.widthRect, this.heightRect);    this.matr.data = [];  }    create(): void {    const retrievedObject = localStorage.getItem('matr');    this.matr = JSON.parse(retrievedObject);    this.matr.data.map(data => {      this.ctx.fillStyle = data.color;      this.ctx.fillRect(data.x, data.y, this.matr.numberOf, this.matr.numberOf);    })  }    clearPixel(): void {    this.colorRect = this.matr.backgroundColor  } } <\/code><\/pre>\n
\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u043e\u0432:<\/p>\n
onResize(data: any), draw(), cleardraw(), create(), clearPixel()<\/p>\n
onResize(data: any)<\/strong> — \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 ngOnInit, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b \u0444\u043e\u0440\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0445\u043e\u043b\u0441\u0442\u0430.<\/p>\n
cleardraw()<\/strong>:  \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0435 \u043a \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0435<\/p>\n
draw()<\/strong>: \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0445\u043e\u043b\u0441\u0442<\/p>\n
create()<\/strong>: \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0438\u0437 localStorage<\/p>\n
clearPixel()<\/strong>: \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0446\u0432\u0435\u0442 \u043a\u0438\u0441\u0442\u0438 \u0440\u0430\u0432\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u0443 \u0445\u043e\u043b\u0441\u0442\u0430<\/p>\n
ngOnInit<\/strong>: \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Angular \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0442 \u0432 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0435. \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0418 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n
ngAfterViewInit<\/strong>: \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c Angular \u043f\u043e\u0441\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435<\/p>\n
\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044d\u0442\u043e \u0432\u0441\u0435, \u0438\u0434\u0443 \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435.<\/p>\n<\/div>\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\/post\/647411\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u0433\u0430\u043b\u0435\u0440\u0435\u0435, \u043f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u0442\u044c \u0437\u0430 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0432\u0448\u0443\u044e\u0441\u044f. \u0412\u043e\u043e\u0431\u0449\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0431\u043b\u043e\u0433, \u0433\u0430\u043b\u0435\u0440\u0435\u044f \u0438 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0430\u044f. \u041c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0436\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c Angular \u0438 \u043f\u0440\u043e\u0431\u0443\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u0438 \u043d\u0430\u0431\u0438\u0442\u044c \u0440\u0443\u043a\u0443.\u00a0\u00a0<\/p>\n
\u042d\u0442\u043e \u043c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0430 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u044f \u0431\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0435\u0435 \u043d\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u043b, \u043d\u043e \u043c\u043e\u0451 \u043b\u0443\u0437\u0435\u0440\u0441\u0442\u0432\u043e \u0438 \u043f\u0440\u0438\u0432\u044b\u0447\u043a\u0430 \u0431\u044b\u0442\u044c \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u043c, \u043c\u0435\u043d\u044f \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0441\u043a\u0440\u0435\u043f\u043e\u0441\u0442\u0438\u043b\u0438, \u0447\u0442\u043e \u044f \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e \u043f\u043e\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u043e\u0435. \u0410\u043c\u0431\u0438\u0446\u0438\u0439 \u043d\u0435\u0442, \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0439\u0444 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u0434\u0435\u043b\u0430\u044e, \u043b\u044e\u0431\u043b\u044e \u0441\u043e\u0437\u0435\u0440\u0446\u0430\u0442\u044c, \u043b\u044e\u0431\u043b\u044e \u0447\u0442\u043e \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c. \u0420\u0430\u0434 \u0431\u0443\u0434\u0443 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043a\u043e\u043c\u0443 \u0442\u043e \u043f\u0440\u0438\u043d\u0435\u0441\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u0443. \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u043f\u0440\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435 \u043e\u043f\u044b\u0442\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u0432\u0441\u0435 \u043d\u0435 \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e \u0438 \u044f \u043d\u0430\u0439\u0434\u0443 \u0432 \u0441\u0435\u0431\u0435 \u0441\u0438\u043b\u044b \u0432\u044b\u043b\u043e\u0436\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0447\u0430\u0441\u0442\u0438.<\/p>\n
\u0410 \u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u043c\u0443 \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u0435\u043c\u043e \u043d\u0438\u0436\u0435.<\/p>\n
\u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Angular, CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0442\u00a0 w3schools<\/a><\/p>\n
\u0418\u0442\u0430\u043a, \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u043e\u0439.<\/p>\n
<\/figcaption><\/figure>\n
\u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c Demo<\/a>, \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u0434<\/a>.<\/p>\n
\u0418\u0434\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0410\u043d\u0433\u0443\u043b\u0430\u0440. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. <\/p>\n
\u041f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0443\u043c\u0435\u0435\u0442\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u044d\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c.<\/p>\n
\u041d\u0430\u0448\u0430 \u043c\u0430\u0441\u0442\u0435\u0440\u0441\u043a\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u0430\u043d\u0434:<\/p>\n
ng g m canvas<\/strong><\/p>\n
ng g c canvas\/components\/main-canvas —module canvas.module<\/strong><\/p>\n
ng g c canvas\/components\/left-panel —module canvas.module<\/strong><\/p>\n
ng g c canvas\/components\/canvas —module canvas.module<\/strong><\/p>\n
ng g c canvas\/components\/form —module canvas.module<\/strong><\/p>\n
\u0413\u0434\u0435 main-canvas<\/strong> \u0443 \u043d\u0430\u0441 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 left-panel, canvas, form<\/strong>.<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c component main-canvas<\/p>\n
code main-canvas.component.html<\/p>\n
<!DOCTYPE html> <html> <title>W3.CSS Template<\/title> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <link rel=\"stylesheet\" href=\"https:\/\/www.w3schools.com\/w3css\/4\/w3.css\"> <link rel='stylesheet' href='https:\/\/fonts.googleapis.com\/css?family=Roboto'> <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\"> <style>  html,  body,  h1,  h2,  h3,  h4,  h5,  h6 {    font-family: \"Roboto\", sans-serif  } <\/style> <div class=\"w3-bar w3-light-grey\">  <h1 style=\"padding-left: 2rem;\">ARTpixel<\/h1> <\/div>   <body class=\"w3-light-grey\">  <!-- Page Container -->  <div class=\"w3-content w3-margin-top\" style=\"max-width:1400px;\">    <!-- The Grid -->    <div class=\"w3-row-padding\">      <!-- Right Column -->      <!-- Left Column -->      <app-left-panel (pagesEvent)=\"getDataPanel($event)\"><\/app-left-panel>      <!-- End Left Column -->      <div class=\"w3-twothird\">        <div class=\"w3-container w3-card w3-white w3-margin-bottom\">          <h2 class=\"w3-text-grey w3-padding-16\"><i              class=\"fa fa-paint-brush fa-fw w3-margin-right w3-xxlarge w3-text-teal\"><\/i>\u041f\u043e\u043b\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f          <\/h2>          <div class=\"w3-container\">            <app-canvas [uploadSuccess]=\"uploadSuccess\"><\/app-canvas>            <hr>          <\/div>        <\/div>        <\/div>      <!-- End Right Column -->    <\/div>    <!-- End Grid -->  <\/div>    <!-- End Page Container -->    <footer class=\"w3-container w3-teal w3-center w3-margin-top\">    <p>Find me on social media.<\/p>    <i class=\"fa fa-facebook-official w3-hover-opacity\"><\/i>    <i class=\"fa fa-instagram w3-hover-opacity\"><\/i>    <i class=\"fa fa-snapchat w3-hover-opacity\"><\/i>    <i class=\"fa fa-pinterest-p w3-hover-opacity\"><\/i>    <i class=\"fa fa-twitter w3-hover-opacity\"><\/i>    <i class=\"fa fa-linkedin w3-hover-opacity\"><\/i>    <p>Powered by <a href=\"https:\/\/www.w3schools.com\/w3css\/default.asp\" target=\"_blank\">w3.css<\/a><\/p>  <\/footer> <\/body>   <\/html> <\/code><\/pre>\n
code main-canvas.component.ts<\/p>\n
import { Component, EventEmitter } from '@angular\/core'; import { FormGroup } from '@angular\/forms';   @Component({  selector: 'app-main-canvas',  templateUrl: '.\/main-canvas.component.html',  styleUrls: ['.\/main-canvas.component.scss'] }) export class MainCanvasComponent {  uploadSuccess: EventEmitter<any> = new EventEmitter();\/\/\u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438    constructor() { }    getDataPanel($event: FormGroup) {    const data = {      widthRect: Number($event.value.widthCanvas),      heightRect: Number($event.value.heightCanvas),      numberOf: Number($event.value.hwPixel),      borderRow: $event.value.meshThickness,      numberRow: Number($event.value.hwPixel) + Number($event.value.meshThickness),      innerWidth: Number($event.value.heightCanvas) * (Number($event.value.hwPixel) + Number($event.value.meshThickness)),      innerHeight: Number($event.value.widthCanvas) * (Number($event.value.hwPixel) + Number($event.value.meshThickness)),      colorfillStyle: $event.value.colorFone    }      this.uploadSuccess.emit(data);\/\/\u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438  } } <\/code><\/pre>\n
\u041f\u043e\u043a\u0430 \u0432 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0443 \u043d\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 left-panel \u00a0<\/p>\n
<app-left-panel (pagesEvent)=\"getDataPanel($event)\"><\/app-left-panel><\/code><\/pre>\n
\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0438\u0445 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 form\u00a0 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0438\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 canvas <\/p>\n
<app-canvas [uploadSuccess]=\"uploadSuccess\"><\/app-canvas> <\/code><\/pre>\n
\u0433\u0434\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445\u00a0 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u0438\u0441\u0443\u043d\u043a\u0430.\u00a0<\/p>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u00a0 left-panel\u00a0<\/p>\n
left-panel.cpmponent.html<\/strong><\/p>\n
<div class=\"w3-third\">    <div class=\"w3-white w3-text-grey w3-card-4\">        <div class=\"w3-container\">            <p class=\"w3-large\"><b><i class=\"fa fa-asterisk fa-fw w3-margin-right w3-text-teal\"><\/i>\u0424\u043e\u0440\u043c\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0445\u043e\u043b\u0441\u0442\u0430<\/b><\/p>            <div class=\"w3-light-grey w3-round-xlarge w3-small\">                <app-form                (pagesEvent)=\"getData($event)\"                ><\/app-form>            <\/div>            <hr>        <\/div>    <\/div><br> <\/div> <\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u00a0 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0444\u043e\u0440\u043c<\/p>\n
<app-form(pagesEvent)=\"getData($event)\"><\/app-form><\/code><\/pre>\n
left-panel.component.ts<\/strong><\/p>\n
import { Component, EventEmitter, Output } from '@angular\/core'; import { FormGroup } from '@angular\/forms';   @Component({  selector: 'app-left-panel',  templateUrl: '.\/left-panel.component.html',  styleUrls: ['.\/left-panel.component.scss'] }) export class LeftPanelComponent {    @Output() pagesEvent: EventEmitter<FormGroup > =    new EventEmitter< FormGroup >();  constructor() { }  getData($event: FormGroup) {    this.pagesEvent.emit($event);  } } <\/code><\/pre>\n
\u0421\u0435\u0439\u0447\u0430\u0441 \u0443 \u043d\u0430\u0441 \u0437\u0434\u0435\u0441\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 getData()<\/strong> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u0444\u043e\u0440\u043c\u044b \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432 \u043a\u0430\u043d\u0432\u0430\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n
\u00a0\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 form.\u00a0\u00a0<\/p>\n
form.component.html<\/strong><\/p>\n
<form [formGroup]=\"form\" class=\"w3-container\">  <p>    \u0425\u043e\u043b\u0441\u0442  <\/p>  <label>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438<\/label>  <input class=\"w3-input\" type=\"number\" name=\"widthCanvas\" formControlName=\"widthCanvas\">    <label>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438<\/label>  <input class=\"w3-input\" type=\"number\" name=\"heightCanvas\" formControlName=\"heightCanvas\">  <p>    Pixel  <\/p>  <label>\u0420\u0430\u0437\u043c\u0435\u0440 \u043f\u0438\u043a\u0441\u0435\u043b\u044f<\/label>  <input class=\"w3-input\" type=\"number\" name=\"hwPixel\" formControlName=\"hwPixel\">  <label>\u0422\u043e\u043b\u0449\u0438\u043d\u0430 \u0441\u0435\u0442\u043a\u0438<\/label>  <input class=\"w3-input\" type=\"number\" name=\"meshThickness\" formControlName=\"meshThickness\">  <label>\u0426\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u0445\u043e\u043b\u0441\u0442\u0430<\/label>  <input class=\"w3-input w3-border 0 input-color\" type=\"color\" name=\"colorFone\" formControlName=\"colorFone\">  <hr>    <div class=\"form-group\">    <button class=\"w3-button w3-pale-red\" (click)=\"onCreate()\">      \u0421\u043e\u0437\u0434\u0430\u0442\u044c    <\/button>  <\/div>  <div>    <hr>  <\/div>   <\/form> <\/code><\/pre>\n
\u0421\u043e\u0437\u0434\u0430\u0435\u043c form.component.ts<\/strong><\/p>\n
import { Component, EventEmitter, OnInit, Output } from '@angular\/core'; import { FormControl, FormGroup, Validators } from '@angular\/forms';   @Component({  selector: 'app-form',  templateUrl: '.\/form.component.html',  styleUrls: ['.\/form.component.scss'] }) export class FormComponent implements OnInit {    @Output() pagesEvent: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();  constructor() { }    form: FormGroup = new FormGroup(    {      \"heightCanvas\": new FormControl(\"24\", Validators.required),      \"widthCanvas\": new FormControl(\"24\", Validators.pattern(\"[0-9]{10}\")),      \"hwPixel\": new FormControl(\"10\", Validators.required),      \"meshThickness\": new FormControl(\"1\", Validators.pattern(\"[0-9]{10}\")),      \"colorFone\": new FormControl(\"green\"),    }  );     onCreate(): void {    this.pagesEvent.emit(this.form);  } }   <\/code><\/pre>\n
\u0438 \u043d\u0430\u043a\u043e\u043d\u0435\u0446 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u044f\u0434\u0440\u0430 canvas.component<\/p>\n
canvas.component.html<\/strong><\/p>\n
<div class=\"w3-card-4\">  <div class=\"w3-container w3-center\">    <label for=\"colorWell\"><\/label>    <input list=\"\" id=\"colorWell\" type=\"color\" name=\"colorRect\" [(ngModel)]=\"colorRect\">    <button (click)=\"create()\">\u0412\u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0440\u0438\u0441\u0443\u043d\u043e\u043a<\/button>    <button (click)=\"clearPixel()\">\u0417\u0430\u0434\u0430\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044e \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430<\/button>    <\/div> <\/div> <div class=\"w3-card-4 layer\">  <div class=\"w3-container w3-center\">    <canvas id=\"canvas\" #canvas><\/canvas>  <\/div> <\/div> <\/code><\/pre>\n
canvas.component.ts<\/strong><\/p>\n
import { AfterViewInit, Component, ElementRef, EventEmitter, OnInit, Renderer2, ViewChild } from '@angular\/core'; import { FormGroup } from '@angular\/forms';   @Component({  selector: 'app-canvas',  templateUrl: '.\/canvas.component.html',  styleUrls: ['.\/canvas.component.scss'] }) export class CanvasComponent implements AfterViewInit, OnInit {  canvas: HTMLCanvasElement;  innerWidth: number;  innerHeight: number;  rendererRef: any;  numberRow: number;  numberOf = 10;  borderRow = 1;  widthRect = 50;  heightRect = 50;  x = 0;  y = 0  canvasX: number \/\/ X click cordinates  canvasY: number \/\/ Y click cordinates  colorRect = '#242323';\/\/\u0446\u0432\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043b\u043a\u0438  colorfillStyle = '#19a923';\/\/\u0446\u0432\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0445\u043e\u043b\u0441\u0442\u0430  matr = { numberOf: 10, backgroundColor: '#19a923', data: [{ x: 0, y: 0, color: '' }] }    private ctx: CanvasRenderingContext2D | null;  @ViewChild('canvas') canvasRef: ElementRef;    constructor(private el: ElementRef,    private renderer: Renderer2,  ) {    this.numberRow = this.numberOf + this.borderRow;    this.innerWidth = this.heightRect * this.numberRow;    this.innerHeight =<\/code><\/pre>\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-328514","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/328514","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=328514"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/328514\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=328514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=328514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=328514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}