lemansky

Untitled

Dec 6th, 2021
860
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  8.  
  9.     <script>
  10.         document.addEventListener("DOMContentLoaded", () => {
  11.             let canvas = document.getElementById("canvasId");
  12.             let context = canvas.getContext("2d");
  13.             let mouse;
  14.             let shapesArray = [];
  15.             let activeShape = -1;
  16.  
  17.             const handler = (evt) => {
  18.                 if(shapesArray[activeShape].shape == 'rectangle'){
  19.                     shapesArray[activeShape].x = evt.layerX - shapesArray[activeShape].width/2;
  20.                 } else {
  21.                     shapesArray[activeShape].x = evt.layerX;
  22.                 }
  23.  
  24.                 shapesArray[activeShape].y = evt.layerY - shapesArray[activeShape].height/2;
  25.                 drawShapes();
  26.                 // console.log(evt);
  27.             }
  28.  
  29.             document.addEventListener("click", (e) => {
  30.                 mouse = mousePlayer1(e);
  31.                 if(activeShape != -1){
  32.                     document.removeEventListener('mousemove', handler);
  33.                     activeShape = -1;
  34.                 } else {
  35.                     shapesArray.forEach((item, i) => {
  36.                         context.beginPath();
  37.                        
  38.                         if(item.shape == 'rectangle'){
  39.                             context.rect(item.x, item.y, item.width, item.height);
  40.                         } else {
  41.                             context.arc(item.x,
  42.                                     item.y,
  43.                                     item.width,
  44.                                     0, 2 * Math.PI);
  45.                         }
  46.  
  47.                         context.closePath();
  48.                         if(context.isPointInPath(mouse.x, mouse.y)){
  49.                             if(activeShape == -1){
  50.                                 activeShape = i;
  51.                                 document.addEventListener('mousemove', handler);
  52.                             }
  53.                         }
  54.                     });
  55.                 }
  56.             });
  57.  
  58.  
  59.             let btn = document.querySelectorAll('#drawShape')[0];
  60.             btn.addEventListener('click', (e) => {
  61.  
  62.                     let checkbox = document.querySelectorAll('.form-check-input');
  63.  
  64.                     let x = document.querySelectorAll('#posX')[0].value;
  65.                     let y = document.querySelectorAll('#posY')[0].value;
  66.                     let width = document.querySelectorAll('#sizeX')[0].value;
  67.                     let height = document.querySelectorAll('#sizeY')[0].value;
  68.                     let color = colorPicker();
  69.                     let newShape;
  70.                 if(checkbox[0].checked){
  71.                     newShape = new Shape(x, y, width, height, color, 'rectangle');
  72.                 } else if(checkbox[1].checked) {
  73.                     newShape = new Shape(x, y, width, 0, color, 'circle');
  74.                 }
  75.  
  76.                 if(newShape?.x){
  77.                     shapesArray.push(newShape);
  78.                 }
  79.                 drawShapes();
  80.                 console.log(shapesArray);
  81.  
  82.             });
  83.  
  84.             const drawShapes = () => {
  85.                 context.clearRect(0, 0, canvas.width, canvas.height);
  86.                 for (let i = 0; i < shapesArray.length; i++) {
  87.                     context.fillStyle = shapesArray[i].color;
  88.                     context.beginPath();
  89.                     if(shapesArray[i].shape == 'rectangle'){
  90.                         context.fillRect(shapesArray[i].x,
  91.                                          shapesArray[i].y,
  92.                                          shapesArray[i].width,
  93.                                          shapesArray[i].height);
  94.                     } else {
  95.                         context.arc(shapesArray[i].x,
  96.                                     shapesArray[i].y,
  97.                                     shapesArray[i].width,
  98.                                     0, 2 * Math.PI);
  99.                         context.fill();
  100.                     }
  101.                     context.closePath();
  102.                 }
  103.             }
  104.  
  105.         });
  106.  
  107.         class Shape{
  108.             constructor(x, y, width, height, color, shape){
  109.                 this.x = x;
  110.                 this.y = y;
  111.                 this.width = width;
  112.                 this.height = height;
  113.                 this.color = color;
  114.                 this.shape = shape;
  115.             }
  116.         }
  117.  
  118.         const colorPicker = () => {
  119.             let color = '#';
  120.             let hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
  121.             for (let i = 0; i < 6; i++) {
  122.                 color = color + hex[Math.floor(Math.random()*16)];
  123.             }
  124.  
  125.             return color;
  126.         }
  127.  
  128.         const mousePlayer1 = (e) => {
  129.           return {
  130.             x: e.layerX,
  131.             y: e.layerY,
  132.           }
  133.         }
  134.  
  135.         </script>
  136.     <style type="text/css">
  137.     #canvasId{
  138.         background: black;
  139.     }
  140.     </style>
  141. </head>
  142. <body class="p-2">
  143.     <div class="container-fluid">
  144.         <div class="row">
  145.             <div class="col-auto">
  146.                 <canvas id="canvasId" class="d-block" width="800" height="600"></canvas>
  147.             </div>
  148.             <div class="col-3">
  149.  
  150.                 <div class="form-check">
  151.                     <div class="d-inline-block mx-4">
  152.                         <input type="radio" id="shape1" name="shape" class="form-check-input" value="Rect" >
  153.                         <label class="form-check-label" for="shape1">Четириъгълник</label>
  154.                     </div>
  155.                     <div class="d-inline-block mx-4">
  156.                         <input type="radio" id="shape2" name="shape" class="form-check-input" value="Circle">
  157.                         <label class="form-check-label" for="shape2">Окръжност</label>
  158.                     </div>
  159.                 </div>
  160.  
  161.                 <div class="form-group mb-3">
  162.                     <label> Координат по X </label>
  163.                     <input class="form-control" id="posX" value="100"></input>
  164.                 </div>
  165.                 <div class="form-group mb-3">
  166.                     <label> Координат по Y </label>
  167.                     <input class="form-control" id="posY" value="100"></input>
  168.                 </div>
  169.                 <div class="form-group mb-3">
  170.                     <label> Широчина </label>
  171.                     <input class="form-control" id="sizeX" value="200"></input>
  172.                 </div>
  173.                 <div class="form-group mb-3">
  174.                     <label> Височина </label>
  175.                     <input class="form-control" id="sizeY" value="20"></input>
  176.                 </div>
  177.                 <div class="form-group d-grid">
  178.                     <input type="button" class="btn btn-info text-white" id="drawShape" value="Създай">
  179.                 </div>
  180.             </div>
  181.         </div>
  182.     </div>
  183. </body>
  184. </html>
RAW Paste Data