关于前端:Fabricjs-渐变

在 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>

r1r2x1y1x2y2 这几个参数能够本人批改值而后看看成果,本人亲手改一下会了解得更粗浅。

仓库地址

本文在线示例

示例代码

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

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据