Fabric.js 绘制图形 API 完全指南

Fabric.js 是一个功能强大的 HTML5 Canvas 库，提供了丰富的 API 用于绘制和操作图形对象。本文将详细介绍 Fabric.js 中所有的绘制图形 API 及其参数，帮助开发者全面掌握 Fabric.js 的使用。

安装与引入

安装

通过 npm 安装 Fabric.js：

npm install fabric

引入

在 HTML 文件中引入 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 Example</title><script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.6.0/fabric.min.js"></script>
</head>
<body><canvas id="canvas" width="800" height="600"></canvas><script src="app.js"></script>
</body>
</html>

创建 Canvas

在绘制图形之前，需要先创建一个 Canvas 实例：

javascript">const canvas = new fabric.Canvas('canvas');

绘制图形 API

矩形 (Rect)

绘制矩形的 API 是 fabric.Rect。它接受一组参数来定义矩形的属性。

javascript">const rect = new fabric.Rect({left: 100,top: 100,width: 200,height: 100,fill: 'red',stroke: 'black',strokeWidth: 2,angle: 0,opacity: 1,rx: 10,  // 圆角矩形的圆角半径ry: 10   // 圆角矩形的圆角半径
});
canvas.add(rect);

圆形 (Circle)

绘制圆形的 API 是 fabric.Circle。它接受一组参数来定义圆形的属性。

javascript">const circle = new fabric.Circle({left: 300,top: 100,radius: 50,fill: 'blue',stroke: 'black',strokeWidth: 2,angle: 0,opacity: 1
});
canvas.add(circle);

椭圆 (Ellipse)

绘制椭圆的 API 是 fabric.Ellipse。它接受一组参数来定义椭圆的属性。

javascript">const ellipse = new fabric.Ellipse({left: 100,top: 250,rx: 100,  // 水平方向半径ry: 50,   // 垂直方向半径fill: 'green',stroke: 'black',strokeWidth: 2,angle: 0,opacity: 1
});
canvas.add(ellipse);

线条 (Line)

绘制线条的 API 是 fabric.Line。它接受一组参数来定义线条的属性。

javascript">const line = new fabric.Line([50, 50, 200, 200], {left: 100,top: 200,stroke: 'green',strokeWidth: 2,angle: 0,opacity: 1
});
canvas.add(line);

多边形 (Polygon)

绘制多边形的 API 是 fabric.Polygon。它接受一组参数来定义多边形的属性。

javascript">const polygon = new fabric.Polygon([{ x: 200, y: 10 },{ x: 250, y: 50 },{ x: 200, y: 100 },{ x: 150, y: 50 }
], {left: 300,top: 200,fill: 'yellow',stroke: 'black',strokeWidth: 2,angle: 0,opacity: 1
});
canvas.add(polygon);

多线段 (Polyline)

绘制多线段的 API 是 fabric.Polyline。它接受一组参数来定义多线段的属性。

javascript">const polyline = new fabric.Polyline([{ x: 300, y: 300 },{ x: 350, y: 350 },{ x: 400, y: 300 },{ x: 450, y: 350 }
], {left: 100,top: 300,fill: 'transparent',stroke: 'blue',strokeWidth: 2,angle: 0,opacity: 1
});
canvas.add(polyline);

路径 (Path)

绘制路径的 API 是 fabric.Path。它接受一个 SVG 路径字符串和一组参数来定义路径的属性。

javascript">const path = new fabric.Path('M 100 100 L 300 100 L 200 300 z', {left: 200,top: 400,fill: 'purple',stroke: 'black',strokeWidth: 2,angle: 0,opacity: 1
});
canvas.add(path);

文本 (Text)

绘制文本的 API 是 fabric.Text。它接受文本内容和一组参数来定义文本的属性。

javascript">const text = new fabric.Text('Hello Fabric.js', {left: 100,top: 400,fontSize: 30,fill: 'black',angle: 0,opacity: 1,fontFamily: 'Arial',fontWeight: 'bold',fontStyle: 'italic',underline: true,linethrough: true,overline: true
});
canvas.add(text);

图像 (Image)

加载和绘制图像的 API 是 fabric.Image。它可以从 URL 或 HTMLImageElement 对象中加载图像。

javascript">fabric.Image.fromURL('path/to/image.jpg', function(img) {img.set({left: 400,top: 200,scaleX: 0.5,scaleY: 0.5,angle: 0,opacity: 1});canvas.add(img);
});

动态路径 (PathGroup)

绘制由多个路径组成的动态路径组的 API 是 fabric.PathGroup。

javascript">const pathData = 'M 0 0 L 100 100 L 200 0 z';
const path1 = new fabric.Path(pathData, { fill: 'red' });
const path2 = new fabric.Path(pathData, { fill: 'blue', top: 50 });const pathGroup = new fabric.PathGroup([path1, path2], {left: 500,top: 300,angle: 0,opacity: 1
});
canvas.add(pathGroup);