Fabric.js 组类完整参考

概述

Fabric.js是一款流行的开源Canvas库，用于创建可以互动的图形界面。组（group）是Fabric.js中一种特殊的对象，可以包含多个子对象（如图形）并进行操作。

在本篇文档中，我们将详细介绍Fabric.js中组类（Group）的使用和属性。

创建一个组

可以使用以下代码创建一个新的Fabric.js组对象：

const group = new fabric.Group(objects, options);

其中 objects 是一个包含所有组成员的数组，options 包含组的属性设置，如下所示：

{
    left: Number,
    top: Number,
    originX: String,
    originY: String,
    width: Number,
    height: Number,
    angle: Number,
    flipX: Boolean,
    flipY: Boolean,
    opacity: Number,
    selectable: Boolean,
    hasControls: Boolean,
    hasBorders: Boolean,
    hoverCursor: String,
    moveCursor: String
}

以下是可用选项的详细信息：

| 选项 | 描述 | | ------------- | --------------------------------------------------------------------- | | left | 组的 x 坐标. | | top | 组的 y 坐标. | | originX | 组内所有成员的水平方向对齐方式，可选值为：left, center, right。 | | originY | 组内所有成员的垂直方向对齐方式，可选值为：top, center, bottom。 | | width | 组宽度. | | height | 组高度. | | angle | 组旋转角度（度数）。 | | flipX | 是否水平翻转组成员. | | flipY | 是否垂直翻转组成员. | | opacity | 组的不透明度（0至1之间的数字）。 | | selectable | 组是否可被选中. | | hasControls | 组是否拥有调整大小和旋转的控制器. | | hasBorders | 组是否拥有边框. | | hoverCursor | 悬停在组成员上的鼠标光标类型. | | moveCursor | 拖拽组成员时的鼠标光标类型. |

操作和方法

下面是Fabric.js组类中可用的一些操作和方法：

获取组成员

const members = group.getObjects();

getObjects()方法返回包含组内成员的数组。

添加新成员

group.addWithUpdate(object);

addWithUpdate()方法在组内添加一个新成员，并更新组的位置和边界框。可以将多个对象添加到组中，然后一次性调用 addWithUpdate() 方法来更新组。

移除成员

group.removeWithUpdate(object);

removeWithUpdate()方法从组中移除给定成员，并更新组的位置和边界框。

清空组成员

group.clear();

clear()方法从组中移除所有成员。

改变组成员顺序

group.bringForward(object);
group.bringToFront(object);

用于将成员前移一层和移动至最前层。

group.sendBackwards(object);
group.sendToBack(object);

用于将成员后移一层和移动至最底层。

获取和设置组的属性

const angle = group.getAngle();
const width = group.getWidth();
const height = group.getHeight();
const opacity = group.getOpacity();
const selectable = group.getSelectable();

用于获取组的角度、宽度、高度、透明度和是否可选属性。

group.setAngle(angle);
group.setWidth(width);
group.setHeight(height);
group.setOpacity(opacity);
group.setSelectable(selectable);

用于设置组的角度、宽度、高度、透明度和是否可选属性。

其他常用操作

group.clone(cb, propertiesToInclude);

将组及其成员复制一份，其中 cb 参数用于返回新的复制组时的回调函数，propertiesToInclude 参数是一个可选的包含组属性的对像，需要在复制的组中包含这些属性。

group.rotate(value, centeredRotation);

将组以给定的角度顺时针旋转，其中 centeredRotation 参数用于指定是否以组的中心点为旋转点。

group.scale(value);

将组的大小按给定比例进行缩放，其中 value 参数可以是数字或包含 x 和 y 属性的对象，用于指定x和y缩放比。

group.toDataURL(options);

将组及其内容作为数据URL返回。选项参数包括：format（输出格式，默认为png）、quality（输出质量，默认为1），multiplier（像素密度，默认为1）。