Necesito crear círculos en lienzo usando tela. Cada clic, se crea un círculo. Sin embargo, si el nuevo círculo se creó, reemplazará al antiguo. Esta es mi demostración de 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();El problema es que está creando repetidamente el objeto Canvas , lo que probablemente resulte en que el elemento canvas se dibuje varias veces en instancias separadas. Es decir, cada instancia nueva solo contendrá el círculo más reciente y dibujará sobre la instancia anterior. Lo que desea hacer es crear la instancia una vez y luego hacer referencia a esa instancia cada vez que avance.
En su fragmento de código anterior, podría verse así:
// 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();Incluso agregué cambios relevantes a su proyecto stackblitz en una bifurcación para ayudar a ilustrar cómo se podría lograr esto.