JavaScript动态图

Question

快速问一句，我是JavaScript的新手，毫无疑问，我会从这个项目中学到很多东西。所以我提出了一个问题(很可能是一个愚蠢的问题)，我的问题是：

我正计划构建一个web应用程序，它可以动态地从Raphael或Joint.js生成形状，这两个形状都非常相似，我的动态意思是，在用户输入之前，将有大量未定义的对象需要绘制，例如，他们希望绘制的对象数量-所以这里有一些代码来强化我的问题：

var erd = Joint.dia.erd;
Joint.paper("world", 800, 250);

var e1 = erd.Entity.create({
    rect: {
        x: 220,
        y: 70,
        width: 100,
        height: 60
    },
    label: "Entity"
});

所以，我已经创建了一个类型为rectangle的对象，但我想知道的是-我可以这样做吗：

var erd = Joint.dia.erd;
Joint.paper("world", 800, 250);
int x, y;
for (int i = 0; i < numOfUserDefObjects; i++) {
    var e1 = erd.Entity.create({
        rect: {
            x: x,
            y: y,
            width: 100,
            height: 60
        },
        label: "Entity"
        x + 20;
        y - 40;
    });
}

所有让我困惑的就是var e1。如果要创建两个对象，当循环第二次迭代循环/创建第二个对象时，是否会从我的SVG/Canvas中删除/删除/覆盖在循环中创建的第一个对象？

对此稍加了解将不胜感激！再说一次，缺乏JavaScript经验，但这会改变的。

再次谢谢你。

Answer 1

在javascript中，用var声明的局部变量有函数作用域。这意味着每个函数只有一个局部变量的副本。因此，在您的第二个代码块中，只有一个变量e1的副本，并且for循环在每次迭代中为它分配不同的值。

您可以做您正在做的事情，但是当您完成操作时，e1中将只有一个值，该值将是分配给它的for循环的最后一次迭代。

我不知道你到底想要完成什么，但是你可以像这样创建一个对象数组：

var erd = Joint.dia.erd;
Joint.paper("world", 800, 250);
var x = 0, y = 0;
var objs = [];
for (var i = 0; i < numOfUserDefObjects; i++) {
    objs.push(erd.Entity.create({
        rect: {
            x: x,
            y: y,
            width: 100,
            height: 60
        },
        label: "Entity"
    }));
    x += 20;
    y -= 40;
}
// objs now contains an array of the created objects

注意:我还初始化了x和y，修复了声明以使用var而不是int，并在for循环中正确地递增和递减x和y。在你发布的代码中有很多语法错误。