Fabric is a powerful and simple JS Canvas library, we can use it to create, fill graphics, and fill graphics with gradient colors on Canvas. Combined graphics (including combined graphics, graphic text, pictures, etc.) and a series of functions. Simply put, we can implement more complex Canvas functions in a simpler way by using Fabric.
- Official website document address: http://fabricjs.com/docs/github
- Address: https://github.com/fabricjs/fabric.js
- Demo address: http://fabricjs.com/demos/
- NPM address: https://www.npmjs.com/package/fabric
- Chinese documentation: https://www.wenjiangs.com/docs/fabric-js
What is Fabric.js?
Fabric.js is a library that simplifies writing Canvas programs. Fabric.js provides Canvas with the missing object model, svg parser, user interaction, and a whole host of other indispensable tools. Since Fabric.js is a foreign framework, the official API is messy and various, and the relevant documents are mostly in English, and the number is not large, so this article aims to help novices get started with Fabric.js quickly in the project and enjoy the process of drawing Canvas.
Why use Fabric.js?
Canvas provides a good canvas capability, but the Api is not friendly enough. It is actually okay to draw simple graphics, but it is not so convenient to draw some complex graphics and write some complex effects. Fabric.js is developed for this purpose, and it mainly uses objects to write code.
What Fabric.js Can Do
- Create and fill graphics on Canvas (including pictures, text, regular graphics and graphics composed of complex paths).
- Fill the shape with a gradient color.
- Combined graphics (including combined graphics, graphic text, pictures, etc.).
- Sets the graphics animation set user interaction.
- Generate JSON, SVG data, etc.
- The generated Canvas object has its own drag and drop function.
Install Fabric.js
Assuming you're using ES6 and Webpack in your project, you can start using Fabric.js like so:
1. On the command line:
npm install fabric（或yarn add fabric）2. Import it .vue into the file
import { fabric } from 'fabric'3. Start your Fabric.js journey in the life cycle .vue in the single file mounted:
Note: The default fabric npm modules produce fairly large packages, and if you have many packages in Fabric.js you may not need them, in which case you can build your own version on the command line.
draw graphics
1. Declaration canvas
var canvas = new fabric.Canvas('main');2. Draw graphics
var rect = new fabric.Rect({ left:100,//距离画布左侧的距离，单位是像素 top:100,//距离画布上边的距离 fill:'red',//填充的颜色 width:30,//方形的宽度 height:30//方形的高度});3. Add graphics to the canvas
canvas.add(rect);Summarize
The functions of Fabric are very powerful and can achieve various effects. However, due to time constraints, we just sorted out Fabric a little bit, but there are still many functions in Fabric that have not been used. This part of the content needs to be continued in the subsequent development process. Dig deeper, or learn more by looking at the documentation