CODEWITHSUNDEEP
javascriptfabricjs
Carol.Kar
Carol.Kar

Reputation: 5355

FabricJS - Get type and size of selected object

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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.

enter image description here

Any suggestions what I am doing wrong?

I appreciate your replies!

Upvotes: 1

Views: 688

Answers (1)

testing_22
testing_22

Reputation: 2585

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.

enter image description here

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Upvotes: 1

Related Questions