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>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>