Fabric.js is a library that simplifies writing Canvas programs. Fabric.js provides Canvas with the missing object model, svg parser, interactivity and a whole host of other indispensable tools. Since Fabric.js is a foreign framework, the official API is messy and numerous, and most of the relevant documents are in English, and the number is small. Therefore, this article aims to help novices quickly get started with Fabric.js 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. Drawing simple graphics is actually okay, but it is not so convenient to draw some complex graphics and write some complex effects. Fabric.js was developed for this purpose. It mainly uses objects to write code.
What Fabric.js can do
Introducing Fabric.js into the Vue project
Assuming you are using ES6 and Webpack in your project, you can start using Fabric.js as follows:
1. In the command line:
npm install fabric (or yarn add fabric)
2. Introduce it into the .vue file
import { fabric } from 'fabric' 3. Start your Fabric.js journey in mounted: life cycle of a single file in .vue
Note: The default fabric npm module produces quite large packages. If you have a lot of packages in Fabric.js that you may not need, in which case you can build your own version here or on the command line.
Draw graphics Draw regular graphics1. Declare canvas
var canvas =new fabric.Canvas('main');2. Draw graphics
var rect = new fabric.Rect({ left:100,//Distance from the left side of the canvas, in pixels top:100,//Distance from the top of the canvas fill:'red',//Fill color width:30 ,//The width of the square height:30//The height of the square});3. Add graphics to the canvas
canvas.add(rect);
Other rule graphics:
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.TriangleUse path drawing: draw using the movement of points and lines. Draw very complex shapes through the application of lines, curves, and arcs.
In the fabric.Path() method, M represents the movement command, and this M 00 represents moving the brush to the (0,0) point coordinates.
L represents line, L 200 100 means using a pen to draw a line from (0,0) coordinates to (200,100) coordinates. z means to close the path of the shape.
After drawing the triangle, we can use the set() method to set the position, color, angle, transparency and other attributes of the triangle.
The specific code is as follows:
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ left: 120, top: 120,fill:'red' });canvas.add(path); Operations on picturesHTML insert picture
<body> <canvas id=canvas width='800' height='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var canvas = new fabric.Canvas('canvas');//Declare the canvas var imgElement = document.getElementById('img');//Declare our image var imgInstance = new fabric.Image(imgElement,{ //Set the image position and appearance left:100, top:100, width:200, height:100, angle:30//Set the clockwise rotation angle of the graphic}); canvas.add(imgInstance) ;//Add to canvasJavaScript insert image
var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//The image is reduced by 10 times canvas.add(oImg ); }); interaction Interaction with the canvas canvas.add(imgInstance);//Add to canvas var canvas = new fabric.Canvas('canvas'); canvas.on('mouse:down', function(options) { console.log(options.e.clientX , options.e.clientY) })Note: Commonly used monitoring events are as follows:
mouse:down : when the mouse is pressedmouse:move : when the mouse movesmouse:up : When the mouse is raisedOperations on objects on the canvas
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' }); rect.on('selected', function() { //Select the listening event console.log('selected a rectangle'); }); var circle = new fabric.Circle({ radius: 75, fill: 'blue' }); circle.on('selected', function() { console.log('selected a circle'); }); canvas.add(rect); canvas.add(circle);Note: Commonly used monitoring events are as follows:
after:render : after the canvas is redrawnobject:selected : The object is selectedobject:moving : object movingobject:rotating : The object is rotatedobject:added : The object is addedobject:removed : The object is removednew fabric.Group(): accepts two parameters: an array composed of the names of the objects to be combined, and the common attributes of the objects combined.
var canvas = new fabric.Canvas('canvas'); var circle = new fabric.Circle({//Draw a circle radius: 100, fill: '#f00', scaleY: 0.5, originX: 'center',// Adjust the X-axis coordinate of the center point originY: 'center'//Adjust the Y-axis coordinate of the center point}); var text = new fabric.Text('Hello World', {//Draw text fontSize: 30, originX: 'center', originY: 'center' }) //Combine var group = new fabric.Group([circle, text], { left: 150, top: 100, angle: 10 }) canvas.add (group); Serialization and deserializationserialization
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red' }); canvas.add(rect); console.log(JSON .stringify(canvas.toJSON()));Deserialization
var canvas = new fabric.Canvas('canvas'); canvas.loadFromJSON('{objects:[{type:rect,left:50,top:50,width:20,height:20,fill:green,overlayFill:null }')SVG
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ width: 100, height: 100, fill: 'red' }); canvas.add(rect); canvas.toSVG() ;Reference documentation: http://fabricjs.com/articles/
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.