FABRICJS doing configuration and flowchart-Understanding FABRICJS (1)

Driven by Industry 4.0 and IoT, more and more devices are starting to connect to the Internet. For the popularity of web and mobile, many enterprises began to monitor the device from the desktop to the mobile and web side. Although there are still a lot of beautiful UI is to implement the configuration design, but as before the old-fashioned thinking, there are few open-source web to meet the needs of each. Now, with the company's needs, we began to study the configuration design and selected this FABRICJS as a Web presentation configuration design!

Fabricjs is an open source, canvas-based web Interaction JS Library, Open Source Protocol MIT, and has many contributors. English Accessible--->http://fabricjs.com

Fabric provides the object model for canvas rendering, as well as good parsing and interaction with SVG, and can be used as an essential tool for other similar requirements. It provides a simple and powerful object model based on native methods. Also take into account the state and rendering of the canvas, directly let us operate on the object. Most of the later articles are excerpts from the official website of the tutorial, Bo Master is to learn, while remembering. So just a little comb down and do the next translation.

For example, we want to draw a red rectangle to achieve the same effect, with the comparison of native canvas and fabric:

Rotate the rectangle 45 degrees:

Using native canvas requires:

var canvasel = document.getElementById (' C '); var ctx = Canvasel.getcontext (' 2d '= ' red '; Ctx.translate (+/-); Ctx.fillrect (-10,-10, 20, 20);

With fabric you just need to add an attribute:

var new fabric. Canvas (' C '); // Create a rectangle with angle=45 var New fabric. Rect ({    , +  , ' Red ',  +,       45 ); Canvas.add (rect) ;

We need to figure out the distance to rotate in the canvas bitmap and the starting position of the line, and then draw it out that the primitive is directly acting on the entire canvas, and fabric is instantiating an object and manipulating the object's properties and events into the canvas. When we want to move this hold, we use the native Canvas API to re-empty the canvas and redraw it, and the fabric directly changes the object's property location to render! (Emmm ... ）

See the canvas API

var canvasel = document.getElementById (' C ');...... ctx.strokrect // Erase entire canvasarea ctx.clearrect (0, 0, Canvasel.width, canvasel.height); Ctx.fillrect (20, 50, 20 , 20);

And with Fabric

var new fabric. Canvas (' C ', top:50 }); Canvas.renderall ();

Objects of Fabric

Fabric provides 7 of basic object classes, which can save us a lot of time if you simply draw these graphs:

• Fabric. Circle//Circle
• Fabric. Ellipse//Ellipse
• Fabric. Line//Lines
• Fabric. Polygon//Polygon
• Fabric. Polyline//cross-line polyline
• Fabric. Rect//Rectangle
• Fabric. triangle//Triangle

These instances inherit the fabric. Object, if you want to draw some graphics, and you need some public methods. At this point you can be in the fabric. A method is defined on the object to allow the subclass to continue.

For example, we set a method Getangleinradians method in fabric. On object:

Fabric. Object.prototype.getAngleInRadians =function() {  return  This. Get (' angle ')/180 *Math.PI;};varRect =NewFabric. Rect ({angle:45}); Rect.getangleinradians (); //0.785 ...varCircle =NewFabric. Circle ({angle:30, radius:10}); Circle.getangleinradians (); //0.523 ...CircleinstanceofFabric. Circle;//trueCircleinstanceofFabric. Object;//true

You'll find that these objects are ready to use.

Canvas

If we want to operate on a canvas, we will use the following method:

 var  canvas = new  fabric. Canvas (' C '  var  rect = new   fabric. Rect (); Canvas.add (rect);  //  add object  canvas.item ( 0); //  reference fabric. Rect added earlier (first object)  canvas.getobjects (); //  get all objects on canvas (Rect would 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 (interactive)

The point is that the interaction-object model exists to allow programmatic access and manipulation of objects on the canvas. But at the user level the object is manipulated by the mouse, as long as you are through fabric. The Canvas (' ... ') initializes the object, it can be selected , dragged , zoomed out and rotated , and can even be grouped . If you want to disable an interactive feature, you only need to configure it as Boolen Pass:

var new fabric. Canvas (' C 'false//  Disable Group selectionfalse// make Object Unselectable

If you don't want this object to have any action, you can use fabric. Staticcanvas Object

var new fabric. Staticcanvas (' C '); Staticcanvas.add (  new  fabric). Rect ({    ten, height:20,    top:100    , ' Yellow '    ,and  ));

Images (image)

The same is true for pictures.

// (HTML)<canvas id= "C" ></canvas>//(JS )varnew fabric. Canvas (' C '); var imgelement = document.getElementById (' my-image '); var New fabric. Image (imgelement, {      +, +, +,  0.85}); Canvas.add (imginstance);

You can also use fabric directly using the picture path . Image.fromurl to render:

function (oimg) {  // scale image down, and flip it, before adding it onto canvas  Oimg.scale (0.5) . Set ('flipx, true);  Canvas.add (oimg);});

Paths (Lu Jing)

If we want to draw more complex graphics, we need to use the warp to draw

... var new fabric. Path (' M 0 0 L[opacity:0.5] ' red ', Stroke: ' green ', ' * *} ' ); canvas.add (path);

... var new fabric. Path ('m121.32,0l44.58,0c36.67,0,29.5,3.22,24.31,8.41c-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.32c0,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', top:200});

Conclusion

This is the introduction of some basic examples of fabric objects, there are some more complex animations, text, SVG parsing, rendering, serialization, events, image filtering and so on ...

Fabricjs do configuration and flowchart-recognize FABRICJS (1)