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

Question

我需要使用织物在 canvas 中创建圆圈。每次点击，都会创建一个圆圈。但是，如果创建了新圈子，它将替换旧圈子。这是我的 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();

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 以帮助说明如何实现这一点。

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

create a circle object and push them in array

javascript

typescript

canvas

html5-canvas

fabricjs