En fabricjs, todos los objetos dentro del lienzo tienen sus propias propiedades superior e izquierda, pero cuando realizo una selección (con Mayús+clic o arrastrando), los valores superior e izquierdo de todos los objetos dentro de la selección pierden sus valores originales.
Hay un fragmento de código simple que explica mi problema https://jsfiddle.net/kj7qy6a8/
Quiero saber o calcular la parte superior e izquierda real de todos los objetos dentro de una selección, no valores relativos.
Pegaré el código aquí en caso de que quieras probar directamente aquí.
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>De esta respuesta
Cuando un objeto está dentro de un grupo, sus coordenadas relativas al lienzo dependerán del origen del grupo (y también del origen del objeto).
para calcular las coordenadas en un grupo, usa esto
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>