Fabric.js 是一个强大的基于 HTML5 Canvas 的 JavaScript 库，它提供了直观且功能丰富的 API，用于创建和操作各种图形对象，能够帮助开发者更轻松地在网页上实现复杂的绘图和交互功能。以下从多个方面详细介绍 Fabric.js：

主要特性

  1. 对象模型

    • 支持多种基本图形，如矩形、圆形、三角形、多边形等，同时也能处理更复杂的对象，如文本、图像、路径等。
    • 每个对象都可以进行独立的属性设置，如位置、大小、颜色、透明度、旋转角度等。

  2. 事件处理

    • 提供了丰富的事件机制，包括鼠标事件（如点击、双击、鼠标移动等）和对象状态变化事件（如对象移动、缩放、旋转等），方便开发者实现交互效果。

  3. 分组和嵌套

    • 可以将多个对象组合成一个组，对组进行统一的操作，如移动、缩放、旋转等，同时组内的对象也可以单独操作。
    • 支持对象的嵌套，创建复杂的层次结构。

  4. 序列化和反序列化

    • 可以将画布上的所有对象序列化为 JSON 字符串，方便保存和传输。
    • 也能将 JSON 字符串反序列化为画布对象，实现数据的恢复和加载。

  5. 滤镜和特效

    • 提供了多种滤镜效果，如模糊、亮度调整、对比度调整等，可以应用到图像和其他对象上。

  6. 动画支持

    • 支持对象的动画效果，通过设置动画属性和持续时间，可以实现平滑的过渡效果。

安装和使用

安装

可以通过以下几种方式安装 Fabric.js：

  • CDN 引入：在 HTML 文件中直接引入 Fabric.js 的 CDN 链接。 

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
</head>

<body>
    <canvas id="c" width="500" height="500"></canvas>
    <script>
        // 在这里编写 Fabric.js 代码
    </script>
</body>

</html>

  • NPM 安装：如果使用 Node.js 项目，可以使用 NPM 进行安装。 

    npm install fabric
    在 JavaScript 文件中引入：

import fabric from 'fabric';

使用示例

以下是一个简单的使用 Fabric.js 在画布上添加一个矩形的示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric.js Rectangle Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
</head>

<body>
    <canvas id="c" width="500" height="500"></canvas>
    <script>
        // 获取 canvas 元素
        var canvas = new fabric.Canvas('c');

        // 创建一个矩形对象
        var rect = new fabric.Rect({
            left: 100,
            top: 100,
            width: 200,
            height: 100,
            fill: 'blue'
        });

        // 将矩形添加到画布上
        canvas.add(rect);
    </script>
</body>

</html>

应用场景

  • 在线绘图工具：可以利用 Fabric.js 的丰富功能开发类似在线画板、流程图编辑器等工具。

  • 图像编辑：实现基本的图像裁剪、调整颜色、添加文字等操作。

  • 游戏开发：用于创建简单的 2D 游戏场景和角色。