Section No. 04: Fabric.js Using the path to draw irregular graphics

It is easy to draw squares, circles, and triangles on canvas, as long as you call the fabric corresponding method, but these are the rules of the graph, if you want to draw an irregular shape, you can use Fabric.js to provide the path of the drawing method. The so-called path drawing is to use the point and line of the way to draw. By applying lines, curves, and arcs you can have very complex graphics.

Let's take a look at the code first:

var new fabric. Canvas (' canvas '); var new fabric. Path (' M 0 0 L(top:120,fill: ' Red ' }); Canvas.add (path);

The top code needs to be aware of the second line, fabric. The Path () method is followed by a string of strings, which looks a bit complicated, but it's not hard to understand. "M" stands for the "move" command, and this "M 00" represents the movement of the brush to the (0,0) point coordinates. "L" stands for "line", "L 200 100" means to draw a line with a pen, drawing from (0,0) coordinates to (200,100) coordinates. "Z" means to have the graph close the path. So we easily draw a triangle. After the triangle is drawn, we can use the set () method to set the position, color, angle, transparency and other properties of the triangle.

Although it is easy to draw a graph with a path, but the graphics are more complex, you will find it very difficult to control, the code will become bloated and unreadable, in the actual work is not used in this way. We can use SVG instead of the form of this path.

(go) Section No. 04: Fabric.js using paths to draw irregular shapes