Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use Fabric.js manual in html5

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.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report