创建一个圆形对象并将它们推入数组。

Question

创建一个圆形对象并将它们推入数组。

javascripttypescriptcanvashtml5-canvasfabricjs

8

我需要使用fabric在画布中创建圆形。每次点击都会创建一个圆形。但是，如果创建新的圆形，它将替换旧的圆形。这是我的stackblitz演示。

HTML

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

TS

    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();

- Fash

1

我不明白你想要什么？有什么问题吗？你能再解释一下吗？ - Amirreza Noori

嗨@AmirrezaNoori..，我已经使用Stackblitz演示更新了我的问题。 - Fash

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- B. Fleming · Accepted Answer

问题在于您一遍又一遍地创建了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 项目的分支中添加了相关变更，以帮助说明如何实现这一点。