形状在 Fabricjs canvas 中不渲染多次？

Question

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

如何让按钮向 canvas 添加多个矩形？ （不是一次全部，每次点击后加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();
}

Answer 1

您多次将 fabric.Rect 的相同实例添加到 canvas。

当您调用 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();
}

形状在 Fabricjs canvas 中不渲染多次？

Shapes not rendering more than once in Fabricjs canvas?

html

javascript

canvas

html5-canvas

fabricjs