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"
});

所以，我创建了一个矩形类型的对象，但这是我想知道的 - 我可以这样做吗:

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。如果要创建 2 个对象，每当循环第二次遍历循环/创建第二个对象时，循环中创建的第一个对象是否会从我的 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/ 循环。您发布的代码中有很多语法错误。