Fabric.js - 基于HTML5的灵活可扩展的画布库

一、准备工作
在项目中遇到了需要在图片上面打点的需求，想到了canvas和svg,后来找到了Fabric.js库，由于文档是英文的，只能硬啃文档加上在百度上各处搜教程，现在记录一下。
使用vue-fabric来进行封装。

二、Fabric.js简介

Fabric.js是一个基于HTML5的灵活可扩展的画布库，使用JavaScript编写，支持在Canvas上创建、编辑和操作图像、文本、形状等对象。Fabric.js具有以下特点：

• 使用简单，支持多种图形操作，如创建、移动、缩放、旋转、删除等。
• 支持多种对象类型，包括图像、文本、形状、路径等。
• 支持多种事件，如鼠标单击、移动、双击等，可以实现交互式图形应用程序。
• 具有丰富的API，可以轻松扩展和自定义。

三、Fabric.js入门

1. 安装

npm install fabric

2. 基本使用

<canvas id="canvas"></canvas>

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

3. 图形对象

Fabric.js支持多种图形对象，包括：

• fabric.Rect：矩形
• fabric.Circle：圆形
• fabric.Triangle：三角形
• fabric.Path：路径
• fabric.Image：图像
• fabric.Text：文本

4. 图形操作

Fabric.js支持多种图形操作，包括：

• add()：添加对象到画布
• remove()：从画布中删除对象
• bringToFront()：将对象置于最前
• sendToBack()：将对象置于最后
• scale()：缩放对象
• rotate()：旋转对象
• flipX()：水平翻转对象
• flipY()：垂直翻转对象

5. 事件

Fabric.js支持多种事件，如：

• 'mouse:down'：鼠标按下事件
• 'mouse:move'：鼠标移动事件
• 'mouse:up'：鼠标松开事件
• 'mouse:over'：鼠标移入对象事件
• 'mouse:out'：鼠标移出对象事件
• 'object:selected'：对象被选中事件
• 'object:modified'：对象被修改事件

四、Fabric.js进阶

1. 扩展Fabric.js

Fabric.js具有丰富的API，可以轻松扩展和自定义。您可以通过以下方式扩展Fabric.js：

• 创建新的图形对象
• 创建新的事件
• 扩展Fabric.js的现有对象或事件

2. 使用Fabric.js构建交互式图形应用程序

Fabric.js非常适合构建交互式图形应用程序。您可以使用Fabric.js创建画图应用程序、图像编辑器、游戏等。

五、Fabric.js资源

• Fabric.js官方网站
• Fabric.js中文文档
• Fabric.js教程

六、总结

Fabric.js是一个功能强大、使用简单的画布库，非常适合构建交互式图形应用程序。如果您需要在您的项目中使用画布，那么Fabric.js是一个很好的选择。