成都

fabric 中文文档

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

官网文档地址:

地址:

演示地址:

NPM地址:

中文文件:swenjiangs/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

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

.在命令行上:

Npminstallfabric(或yarnaddfabric)

.将其引入。vue文件

从“fabric”导入{ fabric }

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

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

画图形

.声明画布

varcanvas=newfabric。canvas(' main ');

.绘图

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

.将图形添加到画布

canvas . add(rect);

摘要

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

© 版权声明
评论 抢沙发
加载中~
本站一律禁止以任何方式发布或转载任何违法的相关信息
每日一言
不怕万人阻挡,只怕自己投降
Not afraid of people blocking, I'm afraid their surrender