First, preparation

In the project, I met the need to dot pictures and thought of Canvas and SVG. Later, I found the fabric.js library. Since the document was in English, I had to force myself to read the document and search for tutorials on Baidu.

  • Use VUE2 + for development
  • npm i -S fabric

Because of the practice of using HTML

<script src="node_modules/fabric/dist/fabric.js"></script>
Copy the code

Directory:

–node_modules

–index.html

–image

Second, the start

1. Basic use

Apply colours to a drawing pictures

HTML part

<! Don't specify width and height in HTML -->
<canvas id="canvas"></canvas>
or
<! Specify width and height in HTML -->
<canvas id="canvas" width="1000" height="1778"></canvas>

<img id="img" src="./image/demo.jpeg" />
Copy the code

JS part

// Initialize a canvas and specify the width and height (you can also specify the width and height in HTML)
// Tips: Canvas can also be created using Fabric
const canvas = new fabric.Canvas('canvas', {width: 1000.height: 1778});
// Create a picture example, specify the path, the callback function can set the zoom scale, location, size......
// Tips: You can also write a  tag in HTML, which is obtained through Fabric
fabric.Image.fromURL('image/demo.jpeg'.(img) = > {
    img.set({
        width: 1000.height: 1778
    });
    // Add this object to the canvas sample so it can be displayed
    canvas.add(img);
});
// The second way
const img = document.getElementById('img');
const image = new fabric.Image(img, {
    width: 1080.height: 1778
})

canvas.add(image)
Copy the code

ScaleX, scaleY(layer size/image size can be used to match layer size)

Image rendering

2. Set the hierarchy

  1. zIndex
    1. Down: image sendBackwards ();
    2. Up: image. BringForward ();
    3. Top: image bringToFront ();
    4. Down: image sendToBack ();

3. Add and remove events

  • Add event: Canvas. on(eventType, callback)
  • Event Removed: Canvas. off(eventType, [? Callback])
  • Remove all events: Canvas.removelisteners ()

3.1 Adding Events

Tips: For example, the event of an image object is mouseup, mousedown, etc

canvas.on('mouse:down'.(e) = > {
    console.log('Left mouse button down, the position is:', e.pointer.x, e.pointer.y);
})
canvas.on('mouse:up'.(e) = > {
    console.log('Left mouse button lifted, the position is:', e.pointer.x, e.pointer.y)
})
Copy the code

Sample of all events

All event files

3.2 Removing Events

// Remove the specified event
canvas.off('mouse:down');
// Remove all events
canvas.removeListeners();
Copy the code

4. Unrotate and zoom

  • Image. evented: Disables selection

    • Click to prohibit selection, the mouse slide can be selected.
    • Mouse style is default, can not move rotation
    • Event cancellation

  • Image. selectable: Disables selection

    • Click and swipe are disabled
    • The mouse style is still moveable, but not moveable
    • Event cancellation

  • Image. SetControlsVisibility ({}) : you can set a single control point is visible

    • Bl: false, // lower left
    • Br: false, // lower right
    • MB: false, // middle
    • Ml: false, // centre-left
    • Mr: false, // centre-right
    • Mt: false, // upper middle
    • Tl: false, // upper left
    • Tr: false, // up right
    • MTR: false // Rotate control key

  • Image. hasControls: Whether all control points are visible

  • Image. hasBorders: Whether the selected border is visible

The controller