如何使用FabricJS设置矩形选择的背景颜色？

介绍

FabricJS是JavaScript Canvas库，用于创建图形和交互式的canvas。它是一个开源的库，构建并提供了基本的图形处理功能。我们在使用该库时，可能会遇到需要自定义一些组件的需求，比如更改矩形选择框的背景颜色。在本篇文章中，我们将为您提供如何使用FabricJS设置矩形选择框的背景颜色。

了解 FabricJS 中的选择框

在使用 FabricJS 创建图形时，如果需要可交互的图形，那么我们需要使用到它的选择框，如下图所示。


在FabricJS中，选择框的类是fabric.Rect，并且其对象保存在Canvas对象内的activeObject属性中。

设置选中节点的背景颜色

FabricJS 允许我们自定义矩形选择框的样式。我们可以按照以下步骤更改选中节点的背景颜色。

步骤一：创建选中节点的背景

我们首先需要创建选中节点的背景矩形。我们将它添加到canvas中，并设置其样式属性。在下面的代码中，我们创建一个名为activeRect的矩形对象，并定义其样式属性。

var activeRect = new fabric.Rect({
        fill: 'rgba(241, 196, 15, 0.6)', // 背景颜色
        stroke: '#DDDDDD', // 描边颜色
        strokeWidth: 2,   // 描边宽度
        height: 0, // 选中节点的高度
        width: 0, // 选中节点的宽度
        opacity: 1, // 不透明度
        selectable: false // 可选中属性
 });

步骤二：创建选中节点背景矩形的更新函数

接下来，我们需要创建一个函数，用于更新选中节点矩形的大小，并将其放置在选中节点的位置上。

我们将选中节点的位置和大小信息保存在Canvas对象的activeObject属性上。因此，我们可以使用选中节点的信息，更新activeRect对象的大小和位置。在下面的函数中，我们获取了当前选中节点的位置和大小信息，并使用这些信息来更新 activeRect 的位置和大小。

这是一个示例函数：

function updateActiveRect() {
    let activeObj = canvas.getActiveObject();
    if (activeObj) {
        let rect = activeObj.getBoundingRect();
        activeRect.set({
            width: rect.width,
            height: rect.height,
            left: rect.left,
            top: rect.top,
        });
        canvas.renderAll();
    } else {
        canvas.remove(activeRect);
    }
}

在 updateActiveRect 函数中，我们首先检查是否有选中节点。如果有，则获取其位置和大小信息（通过 selectedObject.getBoundingRect() 方法），并使用这些信息更新 activeRect 对象的大小和位置。如果没有选中节点，则从canvas中移除 activeRect 对象。

步骤三：监听页面的变化

为了确保选择框的背景颜色正确更新，我们需要在应用程序中监听更改选中节点的事件并及时更新选中节点背景矩形。在FabricJS中，change 事件可以捕获Canvas对象中的所有更改。我们可以向Canvas对象添加一个事件侦听器，以便在更改选中节点时调用updateActiveRect函数。

示例代码：

canvas.on("object:modified", function () {
    updateActiveRect();
}); 

总结

在本篇文章中，我们了解了在FabricJS中如何自定义矩形选择框的样式并更新选中节点背景颜色。我们创建并添加一个矩形对象，并监听对象的变化事件，更新选中节点背景矩形的大小和位置。这些基本步骤可以帮助我们以一种更有吸引力的方式实现选中节点的背景颜色自定义。