Fabric.js ActiveSelection 类完整参考

简介

ActiveSelection 类是一个继承自 Group 类的 Fabric.js 对象，用于处理选择了多个对象的情况。在画布中选中多个对象时，这些对象会被合并成一个 ActiveSelection 对象，便于处理操作。

实例化

const activeSelection = new fabric.ActiveSelection(objects, [options]);

参数：

• objects：选中的对象数组
• options：选项对象

选项：

• canvas：当前画布对象。默认值为 null
• borderColor：边框颜色。默认值为 #DC143C
• cornerColor：控制点颜色。默认值为 #DC143C
• cornerSize：控制点大小。默认值为 6
• transparentCorners：是否显示控制点边框。默认值为 true
• hasBorders：是否显示边框。默认值为 true
• padding：内容与边框的间距（单位：像素）。默认值为 0

方法

toActiveSelection()

将当前的 Group 对象转换为 ActiveSelection 对象。

const group = new fabric.Group([obj1, obj2, obj3], options);
const activeSelection = group.toActiveSelection();

fromObject(object, callback)

从一个对象解析 ActiveSelection 对象。

const activeSelection = new fabric.ActiveSelection([], options);
activeSelection.fromObject(obj, function() {
    console.log('active selection created');
});

toObject(propertiesToInclude)

将 ActiveSelection 对象转换为 JSON 对象。

const obj = activeSelection.toObject();

_restoreObjectsState()

保存当前选中对象的状态。

_setObjectsCoords()

设置当前选中对象的坐标。

toString()

返回当前对象的字符串表示。

console.log(activeSelection.toString());

属性

_objects

选中的对象数组。

type

对象类型，为 'activeSelection'。

minScaleLimit

最小缩放比例，当缩放对象时，如果当前比例小于该值，则会停止缩放。

selectable

是否可选中。值为 true。

hasControls

是否显示控制点。值为 true。

isActiveSelection

是否为 ActiveSelection 对象。值为 true。

cornerSize

控制点大小，与选项中的 cornerSize 相同。

cornerColor

控制点颜色，与选项中的 cornerColor 相同。

borderColor

边框颜色，与选项中的 borderColor 相同。

transparentCorners

是否显示控制点边框，与选项中的 transparentCorners 相同。

padding

内容与边框的间距，与选项中的 padding 相同。

参考文献

• Fabric.js Active Selection