Fabric.js ActiveSelection selectionBackgroundColor 属性

概述

在 Fabric.js 中，活动选择（ ActiveSelection ）是指当前选中的对象集合，而 selectionBackgroundColor 属性为设置活动选择对象的背景色属性。

语法

activeSelection.selectionBackgroundColor = colorValue;

参数说明：

• colorValue： 表示为字符串类型，用于指定活动选择对象的背景色，例如 '#FF0000' 表示红色。

示例

以下代码演示了如何将活动选择对象的背景色设置为蓝色。

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

// 创建矩形对象
var rect1 = new fabric.Rect({
  width: 150,
  height: 100,
  fill: '#f00',
  left: 10,
  top: 10
});

// 创建另一个矩形对象
var rect2 = new fabric.Rect({
  width: 150,
  height: 100,
  fill: '#00f',
  left: 50,
  top: 50
});

// 将两个矩形添加到canvas中
canvas.add(rect1, rect2);

// 设置活动选择对象的背景色为蓝色
canvas.on('object:selected', function(e) {
  var activeObject = e.target;
  if (activeObject.type === 'activeSelection') {
    activeObject.selectionBackgroundColor = '#00f';
  }
});

canvas.renderAll();

总结

通过调用 ActiveSelection 对象的 selectionBackgroundColor 属性，可以轻松地设置活动选择对象的背景色。这为用户提供了更好的交互体验。