发布于 2020-03-02 21:00:51
组内的物体相对于组的位置,它们的坐标是相对于组的中心重新计算的。当它在组中移动时,应该考虑这些因素。
让我们做一个简单的例子,只有左上角坐标。这条线的绝对左上角坐标由这个公式给出:
'Absolute Line TL X' = 'Group top X left value' + (('Group width' / 2) + 'Line top left X value')
'Absolute Line TL Y' = 'Group top Y left value' + (('Group height' / 2) + 'Line top left Y value')
请检查这个简化的CodeSandbox示例:https://codesandbox.io/s/stackoverflow-60416193-fabric-js-362-qpofr
canvas.on("object:moving", function(e) {
var target;
var coords;
if (e.target._objects) {
target = e.target._objects[0];
coords = calcLineCoords(target, e.target);
} else {
target = e.target;
coords = calcLineCoords(target);
}
caption.text = coords + "";
});
function calcLineCoords(line, groupContainer) {
const { tl } = line.calcCoords();
let coordsStart = tl;
if (!!groupContainer) {
const groupCoordinates = groupContainer.calcCoords();
let groupCoordsStart = groupCoordinates.tl;
var lineTopLeftX =
groupCoordsStart.x + (groupContainer.get("width") / 2 + coordsStart.x);
var lineTopLeftY =
groupCoordsStart.y + (groupContainer.get("height") / 2 + coordsStart.y);
return [lineTopLeftX, lineTopLeftY];
} else {
return [coordsStart.x, coordsStart.y];
}
}
https://stackoverflow.com/questions/60416193
复制相似问题