Как найти площадь прямоугольника или помогите найти ошибку в коде [закрыт]

192

11 ноября 2021, 04:00

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

Есть два нарисованных прямоугольника на канвасе. Как найти площадь их области пересечения которая создает новый прямоугольник?или помогите найти ошибку в коде

    const canvas = document.querySelector("#canvas");
    const ctx = canvas.getContext("2d");
    class Rectangle {
        constructor(x, y, height, width) {
            this.x = x;
            this.y = y;
            this.height = height;
            this.width = width;
        }
        get area() {
            return this.width * this.height;
        }
        intersectDetails(baseSquare, square) {
            const left = Math.max(baseSquare.x, square.x);
            const width =
        Math.min(baseSquare.x + baseSquare.width, square.x + square.width) - left;
            const top = Math.max(baseSquare.y, square.y);
            const height =
        Math.min(baseSquare.y + baseSquare.height, square.y + square.height) - top;
            return {left, width, top, height};
        }

        draw() {
            ctx.beginPath();
            ctx.strokeStyle = randomColor();
            ctx.rect(this.x, this.y, this.width, this.height);
            ctx.stroke();
        }
   }
    const rectangle1 = new Rectangle((Math.random() * canvas.width) / 2,
          (Math.random() * canvas.height) / 2,
          (Math.random() * canvas.height) / 2,
          (Math.random() * canvas.width) / 2);
   const rectangle2 = new Rectangle((Math.random() * canvas.width) / 2,
        (Math.random() * canvas.height) / 2,
        (Math.random() * canvas.height) / 2,
        (Math.random() * canvas.width) / 2);
   rectangle1.draw();
   rectangle2.draw();
   const figure = new Rectangle().intersectDetails(rectangle1, rectangle2);
   console.log(figure.area);

Answer 1

Собрал на телефоне сниппет из svg, я надеюсь это не принципиально, просто так меньше кода для визуализации...

let rects = document.querySelectorAll("rect"); 
 
let r1 = getRect(rects[0]); 
let r2 = getRect(rects[1]); 
 
let l = Math.max(r1.l, r2.l); 
let r = Math.min(r1.r, r2.r); 
let b = Math.min(r1.b, r2.b); 
let t = Math.max(r1.t, r2.t); 
 
rects[2].setAttribute("x", l); 
rects[2].setAttribute("y", t); 
rects[2].setAttribute("width", r-l); 
rects[2].setAttribute("height", b-t); 
 
function getRect(rect){ 
    let l = +rect.getAttribute("x"); 
    let t = +rect.getAttribute("y"); 
    let r = l + +rect.getAttribute("width"); 
    let b = t + +rect.getAttribute("height"); 
    return {l,t,b,r} 
}

<svg id="test"> 
  <rect fill=wheat x=5 y=5 width=50 height=60></rect> 
  <rect fill=teal x=45 y=35 width=70 height=40></rect>       <rect fill=red></rect>
</svg>