Fabric.js -岩石教程

特点

矢量图形绘制：支持基本形状、路径、文本等矢量图形的绘制。
图像处理：支持加载、裁剪、缩放和滤镜等图像处理功能。
交互和事件：支持对象的拖拽、缩放、旋转和点击等事件处理。
对象变换和分组：支持对象的平移、缩放、旋转和分组操作。
动画支持：提供动画功能，创建动态效果。
序列化：支持将 Canvas 内容导出为 JSON 或图像格式，便于保存和恢复。

安装

可以通过 npm 安装 Fabric.js 或直接引入脚本文件。

使用 npm 安装

npm install fabric

直接引入脚本文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>

基本用法

以下是一个基本示例，展示如何使用 Fabric.js 在 Canvas 上绘制一个简单的矩形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fabric.js Example</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
    <script>
        var canvas = new fabric.Canvas('canvas');

        var rect = new fabric.Rect({
            left: 100,
            top: 100,
            fill: 'red',
            width: 50,
            height: 50
        });

        canvas.add(rect);
    </script>
</body>
</html>

核心概念

Canvas

fabric.Canvas 是 Fabric.js 的核心类，负责管理和渲染所有的图形对象。

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

图形对象

Fabric.js 提供了多种图形对象，如 fabric.Rect、fabric.Circle、fabric.Text、fabric.Image 等。

矩形

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 50,
    height: 50
});
canvas.add(rect);

圆形

var circle = new fabric.Circle({
    left: 200,
    top: 200,
    radius: 50,
    fill: 'blue'
});
canvas.add(circle);

文字

var text = new fabric.Text('Hello Fabric.js', {
    left: 300,
    top: 300,
    fontSize: 30,
    fill: 'green'
});
canvas.add(text);

图像处理

Fabric.js 支持加载和处理图像。

fabric.Image.fromURL('path/to/image.jpg', function(img) {
    img.set({
        left: 100,
        top: 100,
        scaleX: 0.5,
        scaleY: 0.5
    });
    canvas.add(img);
});

交互和事件

Fabric.js 支持对象的拖拽、缩放、旋转以及各种事件处理。

拖拽和缩放

rect.set({
    hasControls: true,
    hasBorders: true,
    selectable: true
});
canvas.renderAll();

事件处理

rect.on('selected', function() {
    console.log('Rectangle selected');
});
canvas.on('object:moving', function(e) {
    console.log('Object moving: ', e.target);
});

高级用法

对象分组

Fabric.js 支持将多个对象进行分组，便于整体操作。

var group = new fabric.Group([rect, circle], {
    left: 150,
    top: 150
});
canvas.add(group);

路径绘制

可以使用 fabric.Path 绘制复杂的路径。

var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({
    left: 100,
    top: 100,
    fill: 'yellow',
    stroke: 'black',
    strokeWidth: 2
});
canvas.add(path);

动画

Fabric.js 提供了简单的动画功能。

rect.animate('left', 400, {
    onChange: canvas.renderAll.bind(canvas),
    duration: 1000,
    easing: fabric.util.ease.easeOutBounce
});

序列化

可以将 Canvas 内容导出为 JSON 格式，以便保存和恢复。

var json = canvas.toJSON();
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));