Why top and left properties become negative after selection fabricjs?

Question

In fabricjs all the objects within the canvas has their own top and left properties, but when I make a selection (with shift+click or dragging) the top and left values for all the objects inside the selection lose their original values.

There is a simple code snippet explaining my problem https://jsfiddle.net/kj7qy6a8/

I want to know or calculate the actual top and left for all the objects within a selection, not relative values.

I will paste the code here in case you wanna try directly here.

const canvasElmt = document.getElementById('myCanvas');

const canvas = new fabric.Canvas(canvasElmt, {
  width: 500,
  height: 500
});

let text1 =  new fabric.Textbox('text1', { top: 20, left: 40 });
let text2 =  new fabric.Textbox('text2', { top: 100, left: 60 });
canvas.add(text1);
canvas.add(text2);

canvas.renderAll();

// button onclick
document.getElementById('btn').onclick = () => {
  const infoElmt = document.getElementById('info');
  infoElmt.textContent = '';

  canvas.getObjects().forEach(({text, top, left}) => {
    infoElmt.innerText += `${text} TOP: ${top} LEFT: ${left}\n`;
  });
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fabricjs test</title>

    <style>
        .canvas-container{border: 2px solid;}
        button{padding: 7px; background: lightgreen; font-weight: bolder;}
    </style>

</head>
<body>
     
    <h1>Steps to reproduce the error:</h1>
    <ol>
        <li>click the "check top and left" button</li>
        <li>select both object (text1 and text2)</li>
        <li>once the objects have been selected, press the button again.</li>
        <li>now you can see the top and left values are negative or wrong</li>
    </ol>

    <canvas id="myCanvas"></canvas>

    <button id="btn">Check top and left</button>
    <div id="info"></div>

    <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.min.js"></script>

</body>
</html>

score 5 · Accepted Answer · answered Mar 05 '22 at 07:43

From this answer

When an object is inside a group, its coordinates relative to the canvas will depend on the origin of the group (and origin of the object as well).

to calculate the coordinates in a group, use this

let objectLeft = obj.left
let objectTop = obj.top
let groupLeft = group.left
let groupTop = group.top
let objectInGroupLeft = objectLeft + groupLeft + group.width / 2
let objectInGroupTop = objectTop + groupTop + group.height / 2

const canvasElmt = document.getElementById('myCanvas');

const canvas = new fabric.Canvas(canvasElmt, {
  width: 500,
  height: 500
});

let text1 = new fabric.Textbox('text1', {
  top: 20,
  left: 40
});
let text2 = new fabric.Textbox('text2', {
  top: 100,
  left: 60
});
canvas.add(text1);
canvas.add(text2);

canvas.renderAll();

// button onclick
document.getElementById('btn').onclick = () => {
  const infoElmt = document.getElementById('info');
  infoElmt.textContent = '';
  let objects = canvas._objects
  let group = objects[0].group

  if (group != undefined) {
    infoElmt.innerText += `Group LEFT: ${group.left} TOP: ${group.top} \n`;
  } else {
    infoElmt.innerText += `No Group!\n`;
  }

  objects.forEach((obj) => {
    let objectLeft = obj.left
    let objectTop = obj.top
    if (group == undefined) {

      infoElmt.innerText += `${obj.text}  LEFT: ${objectLeft} TOP: ${objectTop}\n`;
    } else {
      let groupLeft = group.left
      let groupTop = group.top
      let objectInGroupLeft = objectLeft + groupLeft + group.width / 2
      let objectInGroupTop = objectTop + groupTop + group.height / 2
      infoElmt.innerText += `Group-${obj.text} LEFT: ${objectInGroupLeft} TOP: ${objectInGroupTop}\n`;
    }


  });

}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fabricjs test</title>

  <style>
    .canvas-container {
      border: 2px solid;
    }
    
    button {
      padding: 7px;
      background: lightgreen;
      font-weight: bolder;
    }
  </style>

</head>

<body>

  <h1>Steps to reproduce the error:</h1>
  <ol>
    <li>click the "check top and left" button</li>
    <li>select both object (text1 and text2)</li>
    <li>once the objects have been selected, press the button again.</li>
    <li>now you can see the top and left values are negative or wrong</li>
  </ol>

  <canvas id="myCanvas"></canvas>

  <button id="btn">Check top and left</button>
  <div id="info"></div>

  <script src="https://unpkg.com/fabric@5.2.1/dist/fabric.min.js"></script>

</body>

</html>

Why top and left properties become negative after selection fabricjs?

1 Answers1