In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
Today, the editor will share with you the relevant knowledge points about how to use the Fabric.js manual in html5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.
Introduction what is Fabric.js?
Fabric.js is a library that simplifies Canvas programming. Fabric.js provides Canvas with the missing object model, svg parser, interaction, and a set of other indispensable tools. Because Fabric.js is a foreign framework, the official API is numerous and messy, and most of the related documents are in English, and the number is small.
Why use Fabric.js?
Canvas provides a good canvas capability, but Api is not friendly enough. Drawing simple graphics is actually OK, but it is not so convenient to do some complex graphics and write some complex effects. Fabric.js is developed for this purpose, it is mainly to write code in the way of objects.
What Fabric.js can do.
Create and fill graphics (including pictures, text, regular graphics, and complex paths that make up graphics) on Canvas.
Fill the graph with a gradient color.
Combined graphics (including combined graphics, graphic text, pictures, etc.).
Set up graphic animation set user interaction.
Generate JSON, SVG data, etc.
The generated Canvas object comes with drag-and-drop functionality.
Start
Introducing Fabric.js into Vue Project
Assuming that you are using ES6 and Webpack in your project, you can start using Fabric.js, as follows:
1. On the command line:
Npm install fabric (or yarn add fabric)
2. Introduce it into the .vue file
Import {fabric} from 'fabric'
3. Mounted in the single file of .vue: start your Fabric.js journey in the life cycle.
Note: the default fabric npm module produces fairly large packages, and if you have many packages in Fabric.js that you may not need, in this case, you can build your own version here or on the command line.
Draw a graph
Draw regular graphics
1. Declare the canvas
Var canvas = new fabric.Canvas ('main')
2. Draw graphics
Var rect = new fabric.Rect ({distance of left:100,// from the left side of the canvas in pixels top:100,// to the distance from the top of the canvas to the width of the fill:'red',// filled width:30,// square, height of the height:30// square})
3. Add graphics to the canvas
Canvas.add (rect)
Other rule graphics:
Draw a square var rect = new fabric.Rect
Draw a circle var circle = new fabric.Circle
Draw triangles var triangle = new fabric.Triangle
Draw irregular figures
Draw with path: draw with the movement of points and lines. Draw very complex graphics through the application of lines, curves and arcs.
In the fabric.Path () method, "M" stands for the "move" command, and this "M 00" represents moving the brush to (0P0) point coordinates.
"L" stands for "line", and "L 200100" means to draw a line with a pen, from (200100) to (200100) coordinates. "z" means to close the path of the shape.
After drawing the triangle, we can use the set () method to set the triangle's position, color, angle, transparency and other properties.
The specific code is as follows:
Var path = new fabric.Path ('M 00 L 200 L 170 200 z'); path.set ({left: 120, top: 120); canvas.add (path)
The operation of the picture
HTML inserts a picture
-var canvas = new fabric.Canvas ('canvas'); / / declare canvas var imgElement = document.getElementById (' img') / / declare our picture var imgInstance = new fabric.Image (imgElement, {/ / set the position and appearance of the picture left:100, top:100, width:200, height:100, angle:30// set the clockwise rotation angle}); canvas.add (imgInstance); / / add to the canvas
JavaScript inserts a picture
Var canvas = new fabric.Canvas ('canvas'); fabric.Image.fromURL ('. / 2.pngimages, function (oImg) {oImg.scale (0.1); / / the image is scaled down 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: common monitoring events are as follows:
Mouse:down: when the mouse is pressed
Mouse:move: when the mouse moves
Mouse:up: when the mouse is up
Manipulation of 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 () {/ / selected 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: common monitoring events are as follows:
After:render: after the canvas is repainted
Object:selected: object is selected
Object:moving: object movement
Object:rotating: objects are rotated
Object:added: objects are added
Object:removed: objects are removed
Combination
New fabric.Group (): accepts two parameters: the array of object names to be combined, and the common properties of the objects that are grouped together.
Var canvas = new fabric.Canvas ('canvas'); var circle = new fabric.Circle ({/ / draw circle radius: 100,fill:' # f00,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', {/ / drawing 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 deserialization
Serialization
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,100, fill:' red'}); canvas.add (rect); canvas.toSVG (); that's all about the article "how to use Fabric.js in html5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.