📌  相关文章
📜  如何使用 Fabric.js 更改画布圆圈的选择背景颜色？(1)

📅  最后修改于: 2023-12-03 15:23:51.103000             🧑  作者: Mango

如何使用 Fabric.js 更改画布圆圈的选择背景颜色？

Fabric.js 是一个强大的基于 HTML5 canvas 的 Javascript 库，它可以用于创建交互式的图形应用程序，包括绘图和图像编辑等。在这篇文章中，我们将会介绍如何在 Fabric.js 中更改画布圆圈的选择背景颜色。

准备工作

首先，我们需要准备一个基本的 HTML 文件，并在其中引入 Fabric.js 库和我们自己的脚本文件：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Fabric.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <canvas id="c"></canvas>
</body>
</html>

接下来，我们需要创建一个 Canvas 元素，并将其与 Fabric.js 关联起来：

const canvas = new fabric.Canvas('c', {
    selection: true
});

这将创建一个带有选择功能的 Canvas，即我们可以通过单击其中一个对象来选择它。

接下来，我们需要在 Canvas 上创建一个圆圈对象：

const circle = new fabric.Circle({
    radius: 50,
    fill: 'red',
    left: 100,
    top: 100
});

canvas.add(circle);

这将创建一个半径为 50 像素、填充颜色为红色、位于 Canvas 中心的圆圈。

更改选择背景颜色

默认情况下，当我们单击圆圈对象时，在其周围会出现一个选择框，并显示一个选择背景颜色。在 Fabric.js 中，选择背景颜色默认为半透明的浅蓝色。但是，我们可以通过以下步骤更改它的颜色：

首先，我们需要设置 Canvas 的 selectionBorderColor 属性来改变选择框的边框颜色，例如：

canvas.selectionBorderColor = 'red';

这将将选择框的边框颜色改为红色。

接下来，我们需要创建一个新的对象类型，用于设置选择背景颜色。这个对象类型可以是任何 Fabric.js 的对象类型，例如 Rect：

const selectionBackground = new fabric.Rect({
    width: circle.width,
    height: circle.height,
    fill: 'rgba(255, 255, 0, 0.5)',
    opacity: 1,
    visible: false,
    absolutePositioned: true,
    strokeWidth: 0
});

这个对象将创建一个与圆圈重叠的矩形，宽度和高度与圆圈相同，填充颜色为半透明的黄色，不可见，并且没有边框。

现在，我们需要将选择背景对象与 Canvas 一起添加：

canvas.add(selectionBackground);

然后，我们需要监听 Canvas 的 selection:created 和 selection:updated 事件。在这些事件发生时，我们需要通过计算选定对象的位置和大小来移动和调整选择背景对象：

canvas.on('selection:created', function (e) {
    const bounds = e.target.getBoundingRect();
    selectionBackground.set({
        left: bounds.left,
        top: bounds.top,
        width: bounds.width,
        height: bounds.height,
        visible: true
    });
    canvas.renderAll();
});

canvas.on('selection:updated', function (e) {
    const bounds = e.target.getBoundingRect();
    selectionBackground.set({
        left: bounds.left,
        top: bounds.top,
        width: bounds.width,
        height: bounds.height,
        visible: true
    });
    canvas.renderAll();
});

最后，我们需要将选择背景对象的填充颜色与 Canvas 的 selectionColor 属性链接起来：

canvas.on('selection:created', function (e) {
    selectionBackground.set({
        fill: canvas.selectionColor
    });
    // ...
});

canvas.on('selection:updated', function (e) {
    selectionBackground.set({
        fill: canvas.selectionColor
    });
    // ...
});

现在，当我们选择圆圈对象时，选择背景颜色将被更改为 Canvas 的 selectionColor 属性所代表的颜色，而选择框的边框颜色将变成红色。

完整代码

下面是完整的 HTML 和 Javascript 代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Fabric.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <canvas id="c"></canvas>
</body>
</html>

const canvas = new fabric.Canvas('c', {
    selection: true
});

canvas.selectionBorderColor = 'red';

const circle = new fabric.Circle({
    radius: 50,
    fill: 'red',
    left: 100,
    top: 100
});

const selectionBackground = new fabric.Rect({
    width: circle.width,
    height: circle.height,
    fill: 'rgba(255, 255, 0, 0.5)',
    opacity: 1,
    visible: false,
    absolutePositioned: true,
    strokeWidth: 0
});

canvas.add(circle);
canvas.add(selectionBackground);

canvas.on('selection:created', function (e) {
    selectionBackground.set({
        fill: canvas.selectionColor
    });
    const bounds = e.target.getBoundingRect();
    selectionBackground.set({
        left: bounds.left,
        top: bounds.top,
        width: bounds.width,
        height: bounds.height,
        visible: true
    });
    canvas.renderAll();
});

canvas.on('selection:updated', function (e) {
    selectionBackground.set({
        fill: canvas.selectionColor
    });
    const bounds = e.target.getBoundingRect();
    selectionBackground.set({
        left: bounds.left,
        top: bounds.top,
        width: bounds.width,
        height: bounds.height,
        visible: true
    });
    canvas.renderAll();
});

以上是在 Fabric.js 中更改画布圆圈的选择背景颜色的具体步骤。希望可以帮助你更好地使用 Fabric.js 来创建交互式图形应用程序。