我需要使用织物在 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();
最佳答案
问题是您重复创建 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帮助说明如何实现这一点。
关于javascript - 创建一个圆形对象并将它们插入数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70497711/