Fabric.js 简单强大的 Canvas 图形编辑库

Fabric 是一个强大而简单的 JS Canvas 库,我们能通过使用它实现在 Canvas 上创建、填充图形、给图形填充渐变颜色。 组合图形(包括组合图形、图形文字、图片等)等一系列功能。简单来说我们可以通过使用 Fabric 从而以较为简单的方式实现较为复杂的 Canvas 功能。

  • 官网文档地址:http://fabricjs.com/docs/github
  • 地址:https://github.com/fabricjs/fabric.js
  • Demo地址:http://fabricjs.com/demos/
  • NPM 地址:https://www.npmjs.com/package/fabric
  • 中文文档: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 图形编辑库

为什么要使用Fabric.js?

Canvas 提供一个好的画布能力, 但是 Api 不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果,就不是那么方便了。Fabric.js 就是为此而开发,它主要就是用对象的方式去编写代码。

Fabric.js 能做的事情

  • 在 Canvas 上创建、填充图形(包括图片、文字、规则图形和复杂路径组成图形)。
  • 给图形填充渐变颜色。
  • 组合图形(包括组合图形、图形文字、图片等)。
  • 设置图形动画集用户交互。
  • 生成 JSON、SVG 数据等。
  • 生成 Canvas 对象自带拖拉拽功能。

安装 Fabric.js

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

1、在命令行中:

npm install fabric(或yarn add fabric)

2、将其引入 .vue 文件中

import { fabric } from 'fabric'

3、在 .vue 的单文件中的 mounted: 生命周期里开始你的 Fabric.js 之旅啦

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

绘制图形

1、声明画布

var canvas = new fabric.Canvas('main');

2、绘制图形

var rect = new fabric.Rect({

left:100,//距离画布左侧的距离,单位是像素

top:100,//距离画布上边的距离

fill:'red',//填充的颜色

width:30,//方形的宽度

height:30//方形的高度

});

3、添加图形至画布

canvas.add(rect);

总结

Fabric 的功能显得十分的强大,可以实现多样的效果,但由于时间局限,只是稍微整理了一下Fabric,但是Fabric还有许多的功能没有使用到,这部分的内容就需要在后续的开发过程中继续深入挖掘了,或者通过查看文档来加深了解

以上是 Fabric.js 简单强大的 Canvas 图形编辑库 的全部内容, 来源链接: utcz.com/p/232271.html

回到顶部