Как создать круг через ООП без использования Canvas?

Question

Я реализовал класс Circle со свойствами:

• x - начальное значение координаты x
• y - начальное значение координаты y
• радиус - значения ширины и высоты
• цвет - цвет заливки

И метод: «draw()» - рисует на экране элемент, который описывается указанными свойствами

Но почему метод не работает, и нет кружка?

class Circle {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
    }

    draw() {
        let div = document.createElement('div');
        div.style.width = `${this.radius}`;
        div.style.height = `${this.radius}`;
        div.style.border = "1px solid;";
        div.style.borderRadius = "50%";
        div.style.color = `${this.color}`;
        document.body.appendChild(div);
    }
}
let options = {
    x: 1500,
    y: 100,
    radius: "100px",
    color: 'red'
};
let circle = new Circle(options);

circle.draw();

Answer 1

В вашем конструкторе вы не использовали переданный вами объект, вместо этого вы использовали несколько параметров:

Вместо этого:

constructor(x, y, radius, color) {

Используйте это, когда передаете объект как options:

constructor(options) {

А в конструкторе используйте параметр options, чтобы получить значения:

Object.assign(this, {
    x: 100,
    y: 100,
    radius: 100,
    color: 'red'
}, options);

Используйте Object.assign(), чтобы настроить параметры. Второй параметр действует как набор параметров по умолчанию , третий - фактических параметров, передаваемых конструктору. Параметры по умолчанию будут переопределены фактическими параметрами , переданными в конструктор.

Кредиты для @ Pointy

---

Чтобы расположить круг так, как он имеет координаты x и y, установите его положение на absolute и установите свойства left и top, такие как x и y:

div.style.position = 'absolute';
div.style.left = `${this.x}px`;
div.style.top = `${this.y}px`;

Чтобы установить цвет заливки круга, установите backgroundColor вместо свойства color:

div.style.backgroundColor = `${this.color}`;

... в качестве свойства color задается цвет текста, а не фона элемента .

class Circle {
    constructor(options) {
        Object.assign(this, {
          x: 100,
          y: 100,
          radius: 100,
          color: 'red'
        }, options);
    }

    draw() {
        const div = document.createElement('div');
        div.style.position = 'absolute';
        div.style.left = `${this.x}px`;
        div.style.top = `${this.y}px`;        
        div.style.width = `${this.radius}px`;
        div.style.height = `${this.radius}px`;
        div.style.border = '1px solid;';
        div.style.borderRadius = '50%';
        div.style.backgroundColor = `${this.color}`;
        document.body.appendChild(div);
    }
}

const options = {
    x: 100,
    y: 100,
    radius: 100,
    color: 'red'
};

const circle = new Circle(options);
circle.draw();

Answer 2

Вам нужно добавить div в DOM, и в качестве вашего определенного конструктора вам нужно передать четыре параметра, но вы передаете объект, поэтому попробуйте это:

class Circle {
    constructor(opt) {
        this.x = opt.x;
        this.y = opt.y;
        this.radius = opt.radius;
        this.color = opt.color;
    }

    draw() {
        let div = document.createElement('div');
        div.style.width = this.radius + 'px';
        div.style.height = this.radius + 'px';
        div.style.border = '1px solid;';
        div.style.borderRadius = '50%';
        div.style.backgroundColor = this.color;
        document.body.appendChild(div);
    }
}
let options = {
    x: 1500,
    y: 100,
    radius: 100,
    color: 'red'
};
let circle = new Circle(options);

circle.draw();