形状在 Fabricjs 画布中不会多次渲染？

【问题标题】：Shapes not rendering more than once in Fabricjs canvas?形状在 Fabricjs 画布中不会多次渲染？
【发布时间】：2020-10-20 04:00:49
【问题描述】：

我正在尝试制作一个将形状添加到我的 FabricJS 画布上的按钮，但这些形状只出现一次……嗯。每次单击下面的按钮时，矩形的边框都会变粗，我认为这意味着它们正在被添加，但每当我拖动矩形时，它只会显示为一个。

如何让按钮在画布上添加多个矩形？ （不是一次全部，每次点击后添加 1 个）

我当前的代码：

HTML：

<button onclick="addRectangle"></button>

JavaScript：

var rec = new fabric.Rect({
    top: 10,
    left: 10,
    width: 66,
    height: 35,
    fill: 'silver',
    stroke: 'black',
    strokeWidth: 1
});

function addRectangle() {
  c.add(rec);
  c.renderAll();
}

【问题讨论】：

标签： javascript html canvas html5-canvas fabricjs

【解决方案1】：

您正在将fabric.Rect 的相同实例多次添加到画布中。

当您调用 addRectangle() 两次时，对同一对象的两个引用最终会出现在内部 _objects 数组中 - 没有任何安全措施可以防止这种情况发生。在renderAll() 期间，fabric.js 迭代此数组的内容并呈现其中的每个元素。这就是为什么这个 Rect 被渲染两次的原因。

您要做的是在每个 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();
}

【讨论】：