如何在selection:created 事件中获取单个对象的宽度、高度、左侧和顶部？

Question

我正在获取对象的属性值（顶部、宽度...），因为对象正在 scaled/moved 使用此函数:

canvas.on('object:scaling', onObjectModification);
canvas.on('object:moving', onObjectModification);
canvas.on('object:rotating', onObjectModification);
function onObjectModification(e) {
    var activeObject = e.target;
    var reachedLimit = false;
    objectLeft = activeObject.left,
    objectTop = activeObject.top,
    objectWidth = activeObject.width,
    objectHeight = activeObject.height,
    canvasWidth = canvas.width,
    canvasHeight = canvas.height;
}

我怎样才能使作为一个组移动的每个对象都相同？我需要随着 object:scaling 事件提供的值不断变化。

我知道 selection:created 事件，但我不知道如何使用它来实现我想要的。非常感谢你们的任何帮助。谢谢

Answer 1

在对象缩放期间宽度和高度不会改变。它们将始终相同，只是 scaleX 和 scaleY 会发生变化。

您必须编写一个函数来迭代可能的组子对象。

canvas.on('object:scaling', onObjectModification);
canvas.on('object:moving', onObjectModification);
canvas.on('object:rotating', onObjectModification);
function onObjectModification(e) {
    var activeObject = e.target;
    if (!activeObject) {
      return;
    }
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var reachedLimit = false;
    var objectLeft = activeObject.left;
    var objectTop = activeObject.top;
// this provide scaled height and width
    var objectWidth = activeObject.getWidth();
    var objectHeight = activeObject.getHeight();
    if (activeObject._objects) {
        objs = activeObject._objects;
        for (var i= 0; i < objs.length; i++) {
            var obj = objs[i];
            var objWidth = activeObject.getWidth() * activeObject.scaleX;
            var objHeight = activeObject.getHeight() * activeObject.scaleY;  
        }
    }
}

如何在selection:created 事件中获取单个对象的宽度、高度、左侧和顶部？

How to get individual object's width, height, left and top in selection:created event?

fabricjs