Fabric.js中文文档

Fabric.js中文文档导航

说明：

1、本系列如果有两个超链接，则第一个是官方文档链接，第二个是中文文档链接，用/分隔，若不存在第二个链接或第二个链接无法跳转则代表没有或还未完成。

2、本系列大部分代码demo都是参考官方文档自己实践而成，有些地方与官方文档不一样会有说明，也有少部分没有亲自实现直接使用了官网文档的代码。

3、本系列代码使用vue语法，每篇文章的第一个代码片段会有标签和样式部分，其他代码无特殊情况只放部分mounted(){}中的代码或与上文没有重复的核心代码。

4、更多参考：GitHub、Gitee、个人博客

Vue中使用fabric.js

方法一：
先安装fabricjs

npm i fabric --save

在main.js中使用

import fabric from "fabric"
Vue.use(fabric)

如果方法一无效可以使用方法二⬇️

方法二：

#需要先安装canvas
npm i canvas --save
#安装fabricjs
npm i fabric --save

在需要使用的页面引入

import { fabric } from "fabric";

官方导航

• Home
• Demos
• Tutorial
• Docs
• Custom Build
• Support
• Tests/Benchmarks
• Team
• Follow @fabricjs

General Support(普通帮助)

• Fabric Gotchas/Fabric 缺陷-使用Fabric.js时最常见的问题的答案

Upgrade Resources(升级资源)

• Upgrade Guide/升级指南-每个主要Fabric.js版本中的主要更改的摘要
• v4.0 Breaking Changes -/v4.0重大更改-Fabric.js v.4x中重大更改的指南
• Changelog v2.x and up /Changelog v2.x及更高版本-Fabric.js当前版本亮点
• Fabric.js 2.0 Changes/Fabric.js 2.0更改-Fabric.js 2.0版中的更改的基本摘要
• v2.0 Breaking Change Guide Part 1/v2.0重大更改指南第1部分-第1部分，包括用于处理来自先前Fabric.js版本的JSON的示例代码
• v2.0 Breaking Change Guide Part 2/v2.0重大更改指南第2部分-v2.0的第2部分重大更改
• Changelog v1.x /更改日志 v1.x -Fabric.js的早期版本的发行要点（最高v1.7.23）

Introduction to FabricJS(FabricJS简介)

帮助您开始使用Fabric.js的基本指南

• Introduction to custom controls for Fabric 4.x/Fabric 4.x的自定义控件简介
• Introduction to Fabric object cache/Fabric对象缓存简介
• Introduction to Fabric.js: Part 1/Fabric.js简介：第1部分
  • Why Fabric(为什么用Fabric)
  • Objects(对象)
  • Canvas(画布)
  • Images(图像)
  • Path and PathGroup(路径和路径组)
• Introduction to Fabric.js: Part 2/Fabric.js简介：第2部分
  • Animation(动画)
  • Image filters(图像滤镜)
  • Colors(颜色)
  • Gradients(渐变)
  • Text(文本)
  • Events(事件)
• Introduction to Fabric.js: Part 3 /Fabric.js简介：第3部分
  • Groups(组合)
  • Serialization(序列化)
  • Deserialization, SVG Parser(反序列化，SVG解析器)
  • Subclassing(子类化)
• Introduction to Fabric.js: Part 4 /Fabric.js简介：第4部分
  • Free drawing(自由绘图)
  • Customization(自定义)
  • [Fabric on Node.js(Node.js中的Fabric)
• Introduction to Fabric.js: Part 5/Fabric.js简介：第5部分
  • Pan and zoom the canvas(平移和缩放画布)
• Introduction to Fabric.js: Transformations/Fabric.js简介：转换
  • Using transformations(使用转换)
• Introduction to Fabric.js: Part 7 - Subclasses/Fabric.js简介：第7部分-子类
  • Subclassing Textbox for use bitmap fonts(子类化文本框以使用位图字体)
• Introduction to Fabric.js: Part 8 - Clipping with clipPaths/Fabric.js简介：第8部分-使用clipPaths进行剪辑
  • ClipPaths basics(ClipPaths基础)
  • ClipPaths nesting and more complex scenario(ClipPaths嵌套和更复杂的场景)
  • ClipPaths on canvas(画布上的ClipPaths)
  • ClipPaths and absolute position(ClipPaths和绝对位置)