lemansky

Untitled

Dec 6th, 2021
812
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.  
  16.  
  17.             canvas.addEventListener("click", (e) => {
  18.                 mouse = mousePlayer1(e);
  19.                 // console.log(mouse);
  20.                 shapesArray.forEach(item => {
  21.                     context.beginPath();
  22.                     context.rect(item.x, item.y, item.width, item.height);
  23.                     context.closePath();
  24.  
  25.                     if(context.isPointInPath(mouse.x, mouse.y)){
  26.                         canvas.addEventListener('mousemove', (e) => {
  27.                             mouse = mousePlayer1(e);
  28.                             item.x = mouse.x - item.width/2;
  29.                             item.y = mouse.y - item.height/2;
  30.                             drawShapes();
  31.                             console.log(mouse);
  32.                         });
  33.                     } else {
  34.                         console.log('outside');
  35.                     }
  36.                 });
  37.             });
  38.  
  39.  
  40.             let btn = document.querySelectorAll('#drawShape')[0];
  41.             btn.addEventListener('click', (e) => {
  42.                 let x = document.querySelectorAll('#posX')[0].value;
  43.                 let y = document.querySelectorAll('#posY')[0].value;
  44.                 let width = document.querySelectorAll('#sizeX')[0].value;
  45.                 let height = document.querySelectorAll('#sizeY')[0].value;
  46.                 let color = colorPicker();
  47.                 let newShape = new Shape(x, y, width, height, color, 'inactive');
  48.                 shapesArray.push(newShape);
  49.                 drawShapes();
  50.                 console.log(shapesArray);
  51.  
  52.             });
  53.  
  54.             const drawShapes = () => {
  55.                 context.clearRect(0, 0, canvas.width, canvas.height);
  56.                 for (let i = 0; i < shapesArray.length; i++) {
  57.                     context.fillStyle = shapesArray[i].color;
  58.                     context.fillRect(shapesArray[i].x,
  59.                                      shapesArray[i].y,
  60.                                      shapesArray[i].width,
  61.                                      shapesArray[i].height);
  62.                 }
  63.             }
  64.  
  65.         });
  66.  
  67.         class Shape{
  68.             constructor(x, y, width, height, color, active){
  69.                 this.x = x;
  70.                 this.y = y;
  71.                 this.width = width;
  72.                 this.height = height;
  73.                 this.color = color;
  74.                 this.active = active;
  75.             }
  76.         }
  77.  
  78.         const colorPicker = () => {
  79.             let color = '#';
  80.             let hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
  81.             for (let i = 0; i < 6; i++) {
  82.                 color = color + hex[Math.floor(Math.random()*16)];
  83.             }
  84.  
  85.             return color;
  86.         }
  87.  
  88.         const mousePlayer1 = (e) => {
  89.           return {
  90.             x: e.layerX,
  91.             y: e.layerY,
  92.           }
  93.         }
  94.  
  95.         </script>
  96.     <style type="text/css">
  97.     #canvasId{
  98.         background: black;
  99.     }
  100.     </style>
  101. </head>
  102. <body class="p-2">
  103.     <div class="container-fluid">
  104.         <div class="row">
  105.             <div class="col-auto">
  106.                 <canvas id="canvasId" class="d-block" width="800" height="600"></canvas>
  107.             </div>
  108.             <div class="col-3">
  109.  
  110.                 <div class="form-check">
  111.                     <div class="d-inline-block mx-4">
  112.                         <input type="radio" id="shape1" name="shape" class="form-check-input" value="Rect" >
  113.                         <label class="form-check-label" for="shape1">Четириъгълник</label>
  114.                     </div>
  115.                     <div class="d-inline-block mx-4">
  116.                         <input type="radio" id="shape2" name="shape" class="form-check-input" value="Circle">
  117.                         <label class="form-check-label" for="shape2">Окръжност</label>
  118.                     </div>
  119.                 </div>
  120.  
  121.                 <div class="form-group mb-3">
  122.                     <label> Координат по X </label>
  123.                     <input class="form-control" id="posX" value="100"></input>
  124.                 </div>
  125.                 <div class="form-group mb-3">
  126.                     <label> Координат по Y </label>
  127.                     <input class="form-control" id="posY" value="100"></input>
  128.                 </div>
  129.                 <div class="form-group mb-3">
  130.                     <label> Широчина </label>
  131.                     <input class="form-control" id="sizeX" value="200"></input>
  132.                 </div>
  133.                 <div class="form-group mb-3">
  134.                     <label> Височина </label>
  135.                     <input class="form-control" id="sizeY" value="20"></input>
  136.                 </div>
  137.                 <div class="form-group d-grid">
  138.                     <input type="button" class="btn btn-info text-white" id="drawShape" value="Създай">
  139.                 </div>
  140.             </div>
  141.         </div>
  142.     </div>
  143. </body>
  144. </html>
RAW Paste Data