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

您需要将class MyHomeScreen extends React.Component { static navigationOptions = { drawerLabel: 'Home', }; render() { return ( <View> <Button onPress={() => this.props.navigation.toggleDrawer()} title="Open Drawer" /> </View> ); } } const MyApp = createDrawerNavigator({ Home: { screen: MyHomeScreen, }, Notifications: { screen: MyNotificationsScreen, }, }, { drawerPosition: 'right', });附加到DOM，作为定义的构造函数，您需要传递四个参数，但是您可以传递对象，因此请尝试这样做：

div

Answer 2

在构造函数中，您没有使用传递的对象，而是使用了几个参数：

代替此：

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();

如何在不使用画布的情况下通过OOP创建圆？

2 个答案: