在fabricjs中，画布中的所有对象都有自己的顶部和左侧属性，但是当我进行选择（使用shift+单击或拖动）时，选择范围内所有对象的顶部和左侧值都会丢失其原始值。
有一个简单的代码片段解释了我的问题https://jsfiddle.net/kj7qy6a8/
我想知道或计算选区中所有对象的实际顶部和左侧，而不是相对值。
如果您想直接在这里尝试，我会将代码粘贴到此处。
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/[email protected]/dist/fabric.min.js"></script>
</body>
</html>从这里回答
当对象位于组内时，其相对于画布的坐标将取决于组的原点（以及对象的原点）。
要计算组中的坐标，请使用此
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/[email protected]/dist/fabric.min.js"></script>
</body>
</html>这不是一个答案，而是一个问题 如果我想知道对象（可编辑文本）宽度并将其包含在组中，我该怎么办？因为当我第一次尝试时它可以工作，但在另一次尝试之后该值不会改变