Fabric. The introduction of js

In official terms

Fabric.js is a powerful and simple Javascript HTML5 Canvas tool library

In short, if you need to use Canvas for special effects or interactions, try the fabric.js library, which makes development easier and more intuitive.

🐱 🏍 Fabric. Js’s official website

🐱 🏍 Fabric. Js NPM address

🐱 🏍 Fabric. Js making address




The development environment used in this article

Version 4.6 of fabric.js is used in this example.

Vite was used to build the Vue3 project.


Set up the project

npm init @vitejs/app
Copy the code

Select Vue3 and then initialize the project as prompted.


The installationFabric.js

npm install fabric --save
Copy the code




Why is this article only about gradients?

Gradients are a basic feature of fabric.js, but most articles on the web only write about linear gradients, and very few write about radial gradients, because there seems to be no official example of radial gradients.

I’ve even seen articles and comments stating that fabric.js only supports linear gradients. But that’s wrong!!

Take a look at this example: [Fabric.js gradient effect]

Yes, this article only proves that radial gradient is possible in fabric.js 4.6.




Linear gradient linear

<template>
  <canvas width="600" height="600" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>

<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'

function init() {
  let canvas = new fabric.Canvas('canvas') // Instantiate fabric and bind it to the Canvas element

  / / round
  let circle = new fabric.Circle({
    left: 100.top: 100.radius: 50,})// Linear gradient
  let gradient = new fabric.Gradient({
    type: 'linear'.// linear or radial
    gradientUnits: 'pixels'.// Pixels or pencentage Pixels or percentage
    coords: { x1: 0.y1: 0.x2: circle.width, y2: 0 }, // At least two coordinate pairs (x1, y1, and x2, y2) will define how the gradient expands on the object
    colorStops: [// Define an array of gradient colors
      { offset: 0.color: 'red' },
      { offset: 0.2.color: 'orange' },
      { offset: 0.4.color: 'yellow' },
      { offset: 0.6.color: 'green' },
      { offset: 0.8.color: 'blue' },
      { offset: 1.color: 'purple' },
    ]
  })
  circle.set('fill', gradient);
  canvas.add(circle)
}

onMounted(() = > {
  init()
})
</script>
Copy the code




Radial gradient separation

<template>
  <canvas width="600" height="600" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>

<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'

function init() {
  let canvas = new fabric.Canvas('canvas')  // Instantiate fabric and bind it to the Canvas element

  / / round
  let circle = new fabric.Circle({
    left: 100.top: 100.radius: 50,})let gradient = new fabric.Gradient({
    type: 'radial'.coords: {
      r1: 50.// This property is only available for radial gradient, outer circle radius
      r2: 0.// This property is only available for radial gradient, outer circle radius
      x1: 50.// The x coordinate of the focus
      y1: 50.// The y-coordinate of the focus
      x2: 50.// The x-coordinate of the center point
      y2: 50.// The y-coordinate of the center point
    },
    colorStops: [{offset: 0.color: '#fee140' },
      { offset: 1.color: '#fa709a' }
    ]
  })

  circle.set('fill', gradient);
  canvas.add(circle)
}

onMounted(() = > {
  init()
})
</script>
Copy the code

R1, R2, X1, Y1, X2, y2 these parameters can be modified by yourself and then see the effect. You can understand more deeply by yourself.




The warehouse address

🐱🏍 Online examples of this article

🐱🏍 sample code