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

官网文档地址：

地址：

演示地址：

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还有很多功能没有使用。这部分内容需要在后续的开发过程中进一步探索，或者通过查看文档来加深理解。

相关阅读

azure azure

google Chrome 网络浏览器

fabric 交易 超级账本fabric教程三

谷歌收购twitter旗下开发者平台fabric 收购 Fabric 开发者平台 收录了来自 Twitter 的团队

fabricfabric相关文章最新报道是否代表网络架构的未来 站长资讯平台

fabric相关文章最新报道

fabricfabric相关文章最新报道是否代表网络架构的未来 站长资讯平台

谷歌收购twitter旗下开发者平台fabric 收购 Fabric 开发者平台 收录了来自 Twitter 的团队

fabric 中文文档

分享到： QQ空间 新浪微博 腾讯微博 人人网 微信 百度 复制网址

标签： #fabric相关文章最新报道