FabricJS - Get type and size of selected object

Question

I am trying to get the size and the type of the selected object.

Find below my minimal example:

 var canvas = new fabric.Canvas("c"); canvas.on("object:selected", onObjectSelected); $("#addTxt").on("click", function(e) { text = new fabric.Text("Insert Text here", { left: 100, top: 100 }); canvas.add(text); }); function onObjectSelected(o) { //activeObject = canvas.getActiveObject() activeObject = o.target; console.log(activeObject); console.log("test"); if (activeObject.isType("text")) { //display text logic } else if (activeObject.isType("image")) { //display image } else if (activeObject.isType("xyz")) { //display shape logic } }

 #c { background-color: rgb(255, 255, 255); margin: 10px; border: 1px solid gray; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.min.js"></script> <button type="button" id="addTxt" class="btn btn-primary">Add Text</button> <canvas id="c" width="400" height="400"></canvas>

When I select the object with my mouse I do not get any console response.

Any suggestions what I am doing wrong?

I appreciate your replies!

Answer 1

When you create a canvas, there are some actions that fire it. According to the list provided by the documentation , do not exist such an object:selected event in the canvas , but others like object:modified and object:moving do.

However, by using a combination of selection:created and selection.updated , you can simulate the event of "selecting" the object with that light box around the text.

In this case, the first one fires whenever you click for the first time or click the canvas and then click on the text object again. The second one occurs when you change from one to another text box.

There are several properties in the object selected from the snippet, which you can destructure and retrieve the dimensions of the text object.

 var canvas = new fabric.Canvas("c"); canvas.on("selection:created", onObjectSelected); canvas.on("selection:updated", e => console.log("Moved from other text")); $("#addTxt").on("click", function(e) { text = new fabric.Text("Insert Text here", { left: 100, top: 100 }); canvas.add(text); }); function onObjectSelected(o) { console.log(JSON.stringify(o)) const { selected } = o; const { type, width, height } = selected[0] console.log(type) if (type === "text") { console.log("This is a text with dimensions:", width.toFixed(2), "x", height.toFixed(2)) //display text logic } else if (type === "image") { //display image } else if (type === "xyz") { //display shape logic } }

 #c { background-color: rgb(255, 255, 255); margin: 10px; border: 1px solid gray; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.0/font/bootstrap-icons.css" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.min.js"></script> <button type="button" id="addTxt" class="btn btn-primary">Add Text</button> <canvas id="c" width="400" height="400"></canvas>