Javascript 在Fabricjs画布中渲染不超过一次的形状？

我试图制作一个按钮，将形状添加到我的FabricJS画布上，但形状只显示一次。。。伊什。每次我点击下面的按钮，矩形的边框都会变厚，这意味着它们会被添加，但每当我拖动矩形时，它只会显示为一个

如何使按钮向画布添加多个矩形？（并非每次单击“添加1”后一次全部添加）

我当前的代码：

HTML:

JavaScript:

var rec=new fabric.Rect({
前10名，
左:10,，
宽度：66，
身高：35，
填写：'银'，
笔画：“黑色”，
冲程宽度：1
});
函数addRectangle（）{
c、 添加（rec）；
c、 renderAll（）；
}

您多次将同一个

fabric.Rect

实例添加到画布中

当您两次调用

addRectangle（）

时，对同一对象的两个引用最终会出现在内部

\u对象

数组中-没有任何安全措施可以防止这种情况发生。在

renderAll（）

期间，fabric.js迭代该数组的内容并呈现其中的每个元素。这就是为什么这个矩形被渲染两次

您要做的是在每个

addRectangle（）

调用上创建一个新的

Rect

实例：

function createRect() {
  return new fabric.Rect({
    top: 10,
    left: 10,
    width: 66,
    height: 35,
    fill: "silver",
    stroke: "black",
    strokeWidth: 1
  });
}

function addRectangle() {
  var rect = createRect();
  c.add(rect);
  c.renderAll();
}

您多次向画布添加相同的

fabric.Rect

实例

当您两次调用

addRectangle（）

时，对同一对象的两个引用最终会出现在内部

\u对象

数组中-没有任何安全措施可以防止这种情况发生。在

renderAll（）

期间，fabric.js迭代该数组的内容并呈现其中的每个元素。这就是为什么这个矩形被渲染两次

您要做的是在每个

addRectangle（）

调用上创建一个新的

Rect

实例：

function createRect() {
  return new fabric.Rect({
    top: 10,
    left: 10,
    width: 66,
    height: 35,
    fill: "silver",
    stroke: "black",
    strokeWidth: 1
  });
}

function addRectangle() {
  var rect = createRect();
  c.add(rect);
  c.renderAll();
}