How to remove fabric.js object with user id?

Question

I created a canvas fabric.js editor with some images and texts. but I want to keep track of added images or texts. That is why I provide myId when adding this object. But how to delete an object using this user id?

Here is my code for adding text

var text = new fabric.Text(txt, { left: 30, top: 0, fill: "#"+col , fontFamily: family, id:MyID }); canvas.setActiveObject(text); canvas.add(text); 

Here myID is my user id

But how to remove this text using this myID? I tried

 canvas.remove(get_myID); //where get_myID is provided id by code 

but that will not work. Please, help.

Answer 1

I expanded the Fabric library to perform a similar function.

First create the fabricExtensions.js file and include it immediately after you have loaded the material library in the header section of your page.

  <!-- Load FabricJS Library --> <script type="text/javascript" src="fabric.min.js"></script> <!-- Load FabricJS Extension file --> <!-- ** Load this file in the HEAD AFTER loading FabricJS** --> <script type="text/javascript" src="fabricExtensions.js"></script> 

Inside the newly created fabricExtensions.js file fabricExtensions.js add the following code:

 fabric.Canvas.prototype.getItemByAttr = function(attr, name) { var object = null, objects = this.getObjects(); for (var i = 0, len = this.size(); i < len; i++) { if (objects[i][attr] && objects[i][attr] === name) { object = objects[i]; break; } } return object; }; 

What this block of code does is it allows you to select an object by any attribute assigned to it.

Now, to remove an object, this should work:

 canvas.fabric.getItemByAttr('id', myID).remove(); 

---

This method will allow you to configure ANY attribute set for the object. Alternatively, you can change it to something like this to set up only the exact attribute you were looking for:

 fabric.Canvas.prototype.getItemByMyID = function(myID) { var object = null, objects = this.getObjects(); for (var i = 0, len = this.size(); i < len; i++) { if (objects[i].id&& objects[i].id=== myID) { object = objects[i]; break; } } return object; }; 

And delete the object:

 canvas.fabric.getItemByMyID(myID).remove(); 

Answer 2

Here I get the same functionality. I have two methods: getObjectFromCanvasById and removeObjectFromCanvas. getObjectFromCanvasById accepts an identifier (the identifier that you set (MyID) when creating the canvas object)

 getObjectFromCanvasById(id) { const canvasObject = window.canvas.getObjects().filter((item) => { return item.id === parseInt(id) }) return canvasObject[0] } 

I call this function from the removeObjectFromCanvas method

 removeObjectFromCanvas(objectId) { const canvasObject = this.getObjectFromCanvasById(objectId) window.canvas.remove(canvasObject) } 

Answer 3

Step 1:

 // to get object properties console.log(canvas.getObjects()); 

step 2:

 canvas.item(1).visible = true; //by the reference of index number item(index number here).visible = true or false 

step 3:

 canvas.renderAll(); 

Answer 4

You should call it as canvas.remove(text) . Or you can use text.remove() or canvas.getActiveObject().remove() .