javascript - 创建一个圆形对象并将它们插入数组

Question

我需要使用织物在 Canvas 上创建圆圈。每次点击，都会创建一个圆圈。但是，如果创建了新圈子，它将取代旧圈子。这是我的stackblitz演示。
HTML

<canvas #canvas id="canvas" width="900" height="400" >
  <p>Your browser doesn't support canvas!</p>
</canvas>

客服

    this.canvas = new fabric.Canvas('canvas');
    var circle = new fabric.Circle({
    radius: 20,
    fill: '#eef',
    originX: 'center',
    originY: 'center'
});
    var text = new fabric.Text(`${data.data.name}`, {
    fontSize: 30,
    originX: 'center',
    originY: 'center'
});
    this.group = new fabric.Group([circle, text], {
    left: event.e.offsetX,
    top: event.e.offsetY,
    angle: 0
});
console.log(this.group);
this.canvas.add(this.group);

this.canvas.setActiveObject(this.canvas.item[0]);
this.canvas.renderAll();

Answer 1

问题是您重复创建 Canvas对象，这很可能导致 canvas 元素在不同的实例中被多次绘制。也就是说，每个新实例都只会包含最近的圆圈，并且会覆盖前一个实例。您要做的是创建一次实例，然后每次继续引用该实例。
在上面的代码片段中，它可能看起来像这样:

// Ensures that the instance is only created once!
if(!this.canvas) {
    this.canvas = new fabric.Canvas('canvas');
}

var circle = new fabric.Circle({
    radius: 20,
    fill: '#eef',
    originX: 'center',
    originY: 'center'
});

var text = new fabric.Text(`${data.data.name}`, {
    fontSize: 30,
    originX: 'center',
    originY: 'center'
});

this.group = new fabric.Group([circle, text], {
    left: event.e.offsetX,
    top: event.e.offsetY,
    angle: 0
});

console.log(this.group);
this.canvas.add(this.group);

this.canvas.setActiveObject(this.canvas.item[0]);
this.canvas.renderAll();

我什至在您的 stackblitz 项目中添加了相关更改 in a fork帮助说明如何实现这一点。