Fabric.js ActiveSelection originX 属性

在使用 Fabric.js 时，可能会使用到 ActiveSelection 类型的对象。ActiveSelection 对象是指选中多个对象时，将这些对象组合成的一个对象，使它们在画布上可以像一个单独的对象一样进行操作。在这个对象中，有一个属性 originX，它定义了该组合对象的水平方向上的参考点位置。

语法

var activeSelection = new fabric.ActiveSelection(objects, [options]);
activeSelection.originX = 'left' | 'center' | 'right'; // 可选值，设置对象的水平方向的参考点位置

参数说明

• activeSelection：ActiveSelection 类型的对象
• originX：字符串类型，可选值有三个，分别是 'left'、'center'、'right'，分别表示相对于对象的矩形框左侧、中心和右侧的位置作为对象的参考点。

使用示例

// 创建两个矩形对象，并将它们合并成一个 ActiveSelection 对象
var rect1 = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 50,
  height: 50
});
var rect2 = new fabric.Rect({
  left: 175,
  top: 175,
  fill: 'blue',
  width: 50,
  height: 50
});

var activeSelection = new fabric.ActiveSelection([rect1, rect2], {
  left: 150,
  top: 150,
  width: 100,
  height: 100
});

// 设置参考点位置为对象的中心位置
activeSelection.originX = 'center';

canvas.add(activeSelection);

上述示例中，两个矩形对象使用 fabric.Rect 构造函数创建，然后通过 new fabric.ActiveSelection() 将它们合并为一个对象。之后，使用属性 activeSelection.originX 将参考点设置为对象的中心位置。最后将 ActiveSelection 对象添加至画布中。

关于此属性的详细说明，请参考 Fabric.js 官方文档：https://github.com/fabricjs/fabric.js/wiki/fabric.ActiveSelection#originx