Fabric.js ActiveSelection calcCoords() 方法介绍

简介

calcCoords() 是 Fabric.js 中 ActiveSelection 类中的一个方法，用于计算选中对象的四个坐标点。ActiveSelection 类是一种特殊的类，表示一个选中的对象，它包含多个子对象。calcCoords() 方法的主要作用就是确定选中对象的位置和大小，以便在画布中正确显示对象。

语法

activeSelection.calcCoords(absolute);

参数

• absolute：布尔类型，指定是否计算绝对坐标。如果为 true，则计算绝对坐标；如果为 false，则计算相对坐标。默认值为 true。

返回值

无返回值。calcCoords() 方法主要作用是修改 left、top、width、height 四个属性的值，以及计算四个坐标点的坐标值。

使用

calcCoords() 方法通常会在一些操作之后被调用，例如拖拽、缩放、旋转等。它会计算选中对象的位置和大小，并更新四个坐标点的坐标值。下面是一个示例：

var canvas = new fabric.Canvas("canvas");

// 创建两个矩形对象
var rect1 = new fabric.Rect({
  left: 10,
  top: 10,
  width: 50,
  height: 50,
  fill: "red"
});

var rect2 = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: "blue"
});

// 将两个对象添加到画布上
canvas.add(rect1, rect2);

// 创建一个 ActiveSelection 对象，将两个矩形对象作为子对象
var activeSelection = new fabric.ActiveSelection([rect1, rect2], {
  padding: 5,
  borderColor: "green",
  cornerColor: "yellow"
});

// 将 ActiveSelection 对象添加到画布上
canvas.setActiveObject(activeSelection);

// 移动 ActiveSelection 对象
activeSelection.animate("left", 200, {
  onChange: function() {
    activeSelection.calcCoords();
    canvas.renderAll();
  }
});

上面的示例中，我们创建了两个矩形对象，并将它们添加到画布上。然后，我们创建了一个 ActiveSelection 对象，并将两个矩形对象作为子对象。最后，我们将 ActiveSelection 对象添加到画布上，并使用 animate() 方法移动 ActiveSelection 对象。在移动过程中，我们通过 onChange 事件来调用 calcCoords() 方法，以便在画布中正确显示对象。

注意事项

• calcCoords() 方法需要在选中对象的属性发生变化之后才能调用，否则它计算出来的坐标值可能不正确。
• 在使用 calcCoords() 方法之前，必须先保证 left、top、width、height 四个属性的值正确。

参考资料

• Fabric.js 官方文档：ActiveSelection