Fabric.js is a powerful HTML5 Canvas JS library based on object-oriented thinking.

The Introduction to Fabric section includes:

  • The canvas to create
  • Add, delete, change, and search basic components
  • Create complex paths from SVG

Create canvas and components

Create a canvas:

let canvas = new fabric.Canvas('c')
Copy the code

Pass in the ID of the Canvas element and return an instance of the fabric.canvas class.

If you want to configure canvas-related parameters while instantiating a canvas:

let canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(100, 100, 200)',
  selectionColor: 'blue',
  selectionLineWidth: 2
  // ...
})
Copy the code

If you want to set canvas-related properties after instantiating the canvas:

canvas.setBackgrountImage('http://... ') canvas.onFpsUpdate = function(){ /* ... * /}Copy the code

Instances created using the fabric.canvas class support interaction by default. The Fabric library can be run in a Nodejs environment, and Nodejs obviously does not require interface interaction:

let staticCanvas = new fabric.StaticCanvas('c')
Copy the code

Remove event handling logic from the interface to create lighter canvas instances, but still support object model-based state manipulation.

Fabric provides a variety of base shape components:

  • fabric.Circle
  • fabric.Ellipse
  • fabric.Line
  • fabric.Polygon
  • fabric.Polyline
  • fabric.Rect
  • fabric.Triangle

Create a rectangle component using the fabric.rect class:

let rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
})
Copy the code

Use the fabric.Triangle class to create a Triangle component:

let triangle = new fabric.Triangle({
  width: 20,
  height: 30,
  fill: 'blue',
  left: 50,
  top: 50
})
Copy the code

Fabric supports creating components with uninitialized properties:

let rect = new fabric.Rect()
Copy the code

Fabric initializes the component for us using default properties.

Add and render the rectangle component to the Canvas canvas:

canvas.add(rect)
Copy the code

Update the status

Each component in Fabric inherits from Fabric.Object.

Update attributes of existing elements using the.set() method, which exists in the fabric.object prototype Object, so all components that inherit from that Object can use this method to update their own attributes.

There are two ways to pass parameters to update component properties:

  • Receive the object containing the property to be modified:

    rect.set({ left: 20, top: 50 })
Copy the code

  • Accepts the property to be modified and the value of the property:

    rect.set('fill', 'red')
Copy the code

Each time the set method is executed, the component itself is returned, so Fabric supports chain calls to component methods:

rect.set('angle', 15).set('flipY', true)
Copy the code

Manually rerender the canvas after each update to a component on the canvas.

canvas.renderAll()
Copy the code

In Fabric, users can interact with elements in the canvas by finger or mouse, such as selecting, dragging, zooming, and rotating, and this is the default behavior. Developers can disable interactions:

canvas.selection = false
rect.set('selectable', false)
Copy the code

To find the component

Fabric helps developers manage components added to the canvas. We use Canvas.item () to get a component added to the canvas:

canvas.item(0)
Copy the code

The above code gets the first component added to the Canvas.

Get all components added to canvas:

canvas.getObjects()
Copy the code

Remove the components

Remove a component from the Canvas:

canvas.remove(rect)
Copy the code

Load the image

Fabric can manipulate images as if they were underlying components:

<canvas id='c'></canvas>
<img src='my_image.png' id='my-image'/>
Copy the code
let canvas = new fabric.Canvas('c') let imgElement = document.getElementById('my-image') let imgInstance = new Fabric.image (imgElement, {let: 100, top: 100, Angle: 30, opacity: 0.85}) Canvas. Add (imgInstance)Copy the code

The fabric.image. fromURL class method can also help us get and create an Image component by receiving the Image address and callback function:

Fabric.image.fromurl ('my_image.png', function(oImg) {oim.scale (0.5).set('flipX', true) canvas.add(oImg)})Copy the code

Complex graphics

Fabric’s support for custom paths greatly broadens the form of components that developers can create:

let canvas = new fabric.Canvas('c')
let path = new fabric.Path('M 0 0 L 200 100 L 170 200 z')
path.set({ left: 120, top: 120 })
canvas.add(path)
Copy the code

Paths can also modify their properties:

Path.reset ({fill: 'red', stroke: 'green', opacity: 0.5})Copy the code

Fabric provides SVG support for extremely complex path-drawing commands:

  • fabric.loadSVGFromString()
  • fabric.loadSVGFromURL()

Fabric parses the elements in SVG and converts them into the Fabric object model.