Simple use of fabric.js in Vue

preface

Recent projects require users to be able to use the mouse to draw paths, areas, add images and other requirements. Since I wanted to achieve drawing, I immediately thought of using Canvas to achieve it, so I searched online for some encapsulated canvas libraries and finally decided to use fabric.js

Introduction of Fabric and common drawing methods

The introduction of the fabric

/ / installation
npm install fabric -S
/ / reference
<template>
  <canvas id="c" width="600" height="400"></canvas>
</template>
<script>
import { fabric } from 'fabric'
let canvas = null
export default {
  mounted() {
    canvas = new fabric.Canvas('c')}}</script>

Copy the code

Add canvas background image

// Use local images
let imgUrl = require('Local Image path')
// Use network images
let imgUrl = 'Link address'
fabric.Image.fromURL(imgUrl, (img, err) = > {
  if(err) {
    canvas.setBackgroundColor('rgba (85, 107, 198, 0.6)', 
    canvas.renderAll.bind(canvas))
  }else {
    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
    scaleX: canvas.width / img.width,
      scaleY: canvas.height / img.height,
      crossOrigin: 'anonymous' // Set this parameter when the image to be used is cross-domain}); }})Copy the code

Draw a straight line

let points = [x1, y1, x2, y2] // Start coordinates and end coordinates
let line = new fabric.Line(points, {
  stroke: 'red'.// Line color
  strokeWidth: 4.// Line width
  strokeDashArray: [3.1].// This is what you add when you draw the dotted line, b pixels are empty every a pixels
  evented: false.// When set to false, objects cannot be the target of events
  hasControls: false.// When set to false, the zoom flag does not appear when selected
  hasBorders: false.// When set to false, no border appears when selected
})

canvas.add(line) // Add to canvas
Copy the code

Draw a rectangle

let rect = new fabric.Rect({
  left: 100.// Upper left corner
  top: 100.// Upper left corner
  width: 100.height: 100.fill: 'pink'.// Background color
  stroke: 'Red, // border color strokeWidth: 4, // border width hasControls: false, // When set to false, the rotation and scaling flag will not appear when selected hasBorders: }) Canvas.add (rect) {selectable: false;}) Canvas.add (rect);Copy the code

Add images

// Use local images
let imgUrl = require('Local Image path')
// Use network images
let imgUrl = 'Link address'
fabric.Image.fromURL(imgUrl, (img, err) = > {
  if(! err) { img.set({left: 100.// Upper left corner
      top: 100.// Upper left corner
      width: 100.height: 100.crossOrigin: 'anonymous' // This parameter is invalid when the image used is cross-domain
    })
    canvas.add(img)
  }
})
Copy the code

Rendering text

let text = new fabric.Text('Textual content', {
  left: 100.// Upper left corner
  top: 100.// Upper left corner
  fontSize: 20.fill: 'pink'.// Font color
})

canvas.add(text)
Copy the code

Draws a text box that can be entered

let text = new fabric.Textbox('Default content, nullable', {
  left: 100.// Upper left corner
  top: 100.// Upper left corner
  fontSize: 20.fill: 'pink'.// Font color
})

canvas.add(text)
text.enterEditing() // Enter edit mode
ExitEditing () // exitEditing mode, to be used when appropriate
Copy the code

Using the notes

Commonly used attributes

canvas.isDrawingMode = true; Free to draw Canvas. selectable = false; Control cannot be selected and will not be called Canvas.selection = true; Canvas. SkipTargetFind = true; The entire panel element cannot be selected canvas. FreeDrawingBrush. Color = “# E34F51” set free painting the color of the pen freeDrawingBrush. Width free paint brush width canvas. SetZoom (2); Set artboard scale

methods

Add (object) Add insertAt(object,index) add Remove (object) Remove forEachObject Loop through getObjects() to get all objects item(int) to get child items IsEmpty () to determine whether an empty panel size () panel element that contains (object) query contains an element fabric. The util. Cos fabric. The util. Sin fabric. The util. DrawDashedLine Draw a dotted line getWidth() setWidth() getHeight()? Clear () Clear renderAll() redraw requestRenderAll() request renderCanvas () redraw board? GetCenter (). Top /left get the center coordinates toDatalessJSON() artboard information serialized to the smallest json toJSON() artboard information serialized toJSON moveTo(object,index) move? The dispose ()? GetSelectionContext () gets the selected context. GetSelectionElement () gets the selected element. GetActiveObject () gets the selected object DiscardActiveObject () cancel the isType() image type of the currently selected object? setColor(color) = canvas.set(“full”,””); Rotate () sets the rotation Angle setCoords() sets the coordinates

Canvas event

object:added

object:removed

object:modified

object:rotating

object:scaling

object:moving

before:selection:cleared

selection:cleared

selection:updated

selection:created

path:created

mouse:down

mouse:move

mouse:up

mouse:over

mouse:out

mouse:dblclick