fabric 中文文档

作者：admin 发布时间：2022-08-16 11:26:18 分类：信息浏览：

是一个强大而简单的库，可以用来创建、填充和填充渐变颜色的图形。组合图形(包括组合图形、图形文字、图片等。)等一系列其他功能。简单来说，我们可以用它以更简单的方式实现更复杂的功能。官网文档地址：地址：演示地址：NPM地址：中文文件：https://www.wenjiangs.com......

是一个强大而简单的库，可以用来创建、填充和填充渐变颜色的图形。组合图形(包括组合图形、图形文字、图片等。)等一系列其他功能。简单来说，我们可以用它以更简单的方式实现更复杂的功能。

官网文档地址：

地址：

演示地址：

NPM地址：

中文文件：https://www.wenjiangs.com/docs/fabric-js

什么是Fabric.js？

Fabric.js是一个可以简化Canvas编程的库。Fabric.js为Canvas提供了缺失的对象模型、svg解析器、用户交互以及一整套其他不可或缺的工具。由于Fabric.js是国外的框架，官方API凌乱且众多，相关文档多为英文文档，数量较少，所以本文旨在帮助新手快速入门项目中的Fabric.js，享受绘制Canvas的过程。

为什么要用Fabric.js？

Canvas提供了很好的canvas能力，但是Api不够友好。画简单的图形可以，但是画一些复杂的图形，写一些复杂的效果就不那么方便了。Fabric.js就是为此而开发的，它主要使用object方法编写代码。

Fabric.js能做什么

在画布上创建和填充图形(包括图片、文本、常规图形和由复杂路径组成的图形)。

用渐变颜色填充图形。

组合图形(包括组合图形、图形文字、图片等。).

设置图形动画设置用户交互。

生成JSON、SVG数据等。

使用拖放功能生成画布对象。

安装Fabric.js

假设您的项目中正在使用ES6和Webpack，您可以如下开始使用Fabric.js:

1.在命令行上：

Npminstallfabric(或yarnaddfabric)

2.将其引入。vue文件

从“fabric”导入{ fabric }

3.在. vue的单个文件中挂载：的生命周期中开始您的Fabric.js之旅

注意：默认的fabricnpm模块生成相当大的包。如果您有许多在Fabric.js中可能不需要的包，在这种情况下，您可以在命令行中构建自己的版本。

画图形

1.声明画布

varcanvas=newfabric。canvas(' main ')；

2.绘图

varrect=new fabric . rect({ left :100，//距画布左侧距离，单位为pixel top:100，///距画布顶部距离fill:'red '，//填充颜色宽度：30，///正方形宽度高度：30///正方形高度)

3.将图形添加到画布

canvas . add(rect)；

摘要

布艺的功能非常强大，可以达到各种效果。但是由于时间限制，只整理了一点点Fabric，但是Fabric还有很多功能没有使用。这部分内容需要在后续的开发过程中进一步探索，或者通过查看文档来加深理解。