在 Vue3中使用Fabric.js實現漸變(Gradient)效果，包括徑向漸變radial

Fabric.js 簡介

用官方的話來講

Fabric.js 是一個強大而簡單的 Javascript HTML5 canvas 工具庫

簡單來說，如果你需要用 canvas 做特效或者做交互，那不妨試試 Fabric.js 這個庫，它會使開發更加簡單和直觀。

Fabric.js 官網

Fabric.js npm地址

Fabric.js github地址

本文使用的開發環境

本文案例中使用了 Fabric.js 4.6 這個版本。

使用了 Vite 構建 Vue3 項目。

搭建項目

npm init @vitejs/app

選擇 Vue3，之後再根據提示初始化項目即可。

安裝 Fabric.js

npm install fabric --save

爲什麼本文只寫漸變？

漸變是 Fabric.js 的基礎功能，但網上大部分文章都只寫 線性漸變，很少有寫到徑向漸變的，因爲官方好像也沒給出徑向漸變的例子。

甚至還見過有些文章和評論說 Fabric.js 只支持線性漸變。但這個說法是錯的！！！

請看這個案例：【Fabric.js 漸變效果】

沒錯，本文只想證明在 Fabric.js 4.6版本中是可以實現徑向漸變的。

線性漸變 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') // 實例化fabric，並綁定到canvas元素上

  // 圓
  let circle = new fabric.Circle({
    left: 100,
    top: 100,
    radius: 50,
  })

  // 線性漸變
  let gradient = new fabric.Gradient({
    type: 'linear', // linear or radial
    gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
    coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, // 至少2個座標對（x1，y1和x2，y2）將定義漸變在對象上的擴展方式
    colorStops:[ // 定義漸變顏色的數組
      { 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>

徑向漸變 radial

<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')  // 實例化fabric，並綁定到canvas元素上

  // 圓
  let circle = new fabric.Circle({
    left: 100,
    top: 100,
    radius: 50,
  })

  let gradient = new fabric.Gradient({
    type: 'radial',
    coords: {
      r1: 50, // 該屬性僅徑向漸變可用，外圓半徑
      r2: 0, // 該屬性僅徑向漸變可用，外圓半徑  
      x1: 50, // 焦點的x座標
      y1: 50, // 焦點的y座標
      x2: 50, // 中心點的x座標
      y2: 50, // 中心點的y座標
    },
    colorStops: [
      { offset: 0, color: '#fee140' },
      { offset: 1, color: '#fa709a' }
    ]
  })

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

onMounted(() => {
  init()
})
</script>

r1、r2、x1、y1、x2、y2 這幾個參數可以自己修改值然後看看效果，自己親手改一下會理解得更深刻。

倉庫地址

本文在線示例

示例代碼