Fabricjs configuration and flowchart-Understanding Fabricjs (1) and configuring fabricjs

Fabricjs configuration and flowchart-Understanding Fabricjs (1) and configuring fabricjs

Driven by industry 4.0 and IOT, more and more devices are connected to the Internet. For the popularity of web and mobile terminals, many enterprises start to monitor devices from the desktop to the mobile and web terminals. Although there are still a lot of beautiful UIS to implement the configuration design, there are few open source web to meet various needs, just like old-fashioned thinking. As a result of the company's needs, I began to study the configuration design and selected this FabricJS as the web display configuration design!

Fabricjs is an open-source canvas-based web interaction js library. The open-source protocol MIT has many contributors. English Accessibility ---> http://fabricjs.com

Fabric provides an object model for canvas rendering and can parse and interact SVG well. It can also be used as an indispensable tool for other similar requirements. It provides a simple and powerful object model based on the native method, and takes the canvas state and rendering into account, allowing us to directly operate the object. Most of the subsequent articles are excerpted from the official website. bloggers want to learn and remember them. So I just sorted it out and translated it.

For example, if we want to draw a red rectangle to achieve the same effect, we will use native canvas to compare with Fabric:

Rotate the rectangle 45 degrees:

To use native canvas, You need:

var canvasEl = document.getElementById('c');var ctx = canvasEl.getContext('2d');ctx.fillStyle = 'red';ctx.translate(100, 100);ctx.rotate(Math.PI / 180 * 45);ctx.fillRect(-10, -10, 20, 20);

 

With Fabric, you only need to add one attribute:

Var canvas = new fabric. canvas ('C'); // create a rectangle with angle = 45var rect = new fabric. rect ({left: 100, top: 100, fill: 'red', width: 20, height: 20, angle: 45 // rotate 45 blocks}); canvas. add (rect );

 

We need to calculate the distance between the rotation in the canvas bitmap and the starting position of the draw line, and then draw this image. The native is to directly act on the entire canvas, while Fabric is to instantiate an object, and add the attributes and events of this object to the canvas. When we want to move the canvas, we use the native canvas API to clear the canvas and re-paint the canvas. Fabric directly changes the attribute location of the object for rendering! (Emmm ...)

View the canvas API

var canvasEl = document.getElementById('c');...ctx.strokRect(100, 100, 20, 20);...// erase entire canvas areactx.clearRect(0, 0, canvasEl.width, canvasEl.height);ctx.fillRect(20, 50, 20, 20);

 

Fabric

var canvas = new fabric.Canvas('c');...canvas.add(rect);...rect.set({ left: 20, top: 50 });canvas.renderAll();

 

Fabric object

Fabric provides 7 basic object classes. If you just draw these images, it will save us a lot of time:

• Fabric. Circle // Circle
• Fabric. Ellipse // elliptic
• Fabric. Line // Line
• Fabric. Polygon // Polygon
• Fabric. Polyline // crossover line
• Fabric. Rect // rectangle
• Fabric. Triangle // Triangle

These instances all inherit fabric. Object. If you want to draw some images, you need some common methods. In this case, you can define a method on fabric. Object to continue the subclass.

For example, we need to set a getAngleInRadians method on the fabric. Object:

fabric.Object.prototype.getAngleInRadians = function() {  return this.get('angle') / 180 * Math.PI;};var rect = new fabric.Rect({ angle: 45 });rect.getAngleInRadians(); // 0.785...var circle = new fabric.Circle({ angle: 30, radius: 10 });circle.getAngleInRadians(); // 0.523...circle instanceof fabric.Circle; // truecircle instanceof fabric.Object; // true

 

You will find that all these objects can be used.

Canvas

To operate the canvas, use the following method:

var canvas = new fabric.Canvas('c');var rect = new fabric.Rect();canvas.add(rect); // add objectcanvas.item(0); // reference fabric.Rect added earlier (first object)canvas.getObjects(); // get all objects on canvas (rect will be first and only)canvas.remove(rect); // remove previously-added fabric.Rect

var canvas = new fabric.Canvas('c', {  backgroundColor: 'rgb(100,100,200)',  selectionColor: 'blue',  selectionLineWidth: 2  // ...});// orvar canvas = new fabric.Canvas('c');canvas.setBackgroundImage('http://...');canvas.onFpsUpdate = function(){ /* ... */ };// ...

 

Interactivity)

Focus: Interaction-the object model allows programming to access and manipulate objects on the canvas. However, at the user level, you can use the mouse to manipulate this object. As long as you initialize the object through fabric. Canvas ('...'), it can beSelect,Drag,Zoom in and outAndRotateOr evenGroup. If you want to disable an interactive function, you only need to configure it to pass through boolen:

var canvas = new fabric.Canvas('c');...canvas.selection = false; // disable group selectionrect.set('selectable', false); // make object unselectable

 

If you do not want to perform any operations on this object, you can use the fabric. StaticCanvas object.

var staticCanvas = new fabric.StaticCanvas('c');staticCanvas.add(  new fabric.Rect({    width: 10, height: 20,    left: 100, top: 100,    fill: 'yellow',    angle: 30  }));

 

Images)

The same is true for images.

//(html)<canvas id="c"></canvas>//(js)var canvas = new fabric.Canvas('c');var imgElement = document.getElementById('my-image');var imgInstance = new fabric.Image(imgElement, {  left: 100,  top: 100,  angle: 30,  opacity: 0.85});canvas.add(imgInstance);

 

You can also use the image path directly.Fabric. Image. fromURLTo render:

fabric.Image.fromURL('my_image.png', function(oImg) {  // scale image down, and flip it, before adding it onto canvas  oImg.scale(0.5).set('flipX, true);  canvas.add(oImg);});

Paths)

If we want to draw more complex images, we need to use the road Sutra to draw

 

...var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');...path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });canvas.add(path);

 

...var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');canvas.add(path.set({ left: 100, top: 200 }));

 

 

Conclusion

This section describes some basic instance objects of fabric, as well as some more complex animations, text, SVG parsing, rendering, serialization, events, image filtering, and so on...