乐趣区

关于前端:Fabricjs-渐变

jiezi

在 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 这几个参数能够本人批改值而后看看成果，本人亲手改一下会了解得更粗浅。

仓库地址

本文在线示例

示例代码

点赞 + 关注 + 珍藏 = 学会了

退出移动版