如何使用 FabricJS 向三角形添加阴影？

介绍

FabricJS 是一款基于 HTML5 的强大画布库，它提供了丰富的 API，可以帮助开发者在网页上实现高效的绘图功能。本文将介绍如何使用 FabricJS 向三角形添加阴影。

安装

在使用 FabricJS 之前，需要先下载并安装该库。有两种方式可以完成安装。

方式一：使用 npm 安装

在命令行输入以下命令：

npm install fabric

安装成功后，就可以在项目中引入 FabricJS：

import fabric from 'fabric';

方式二：使用 CDN 引入

在 HTML 文件的 head 标签中添加以下代码：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js" integrity="sha512-yjVcDOF7EBccMgcJwZzCQ5gK3nsbAMshAYpHa7P3aa2gHDMQltpN9dJPN0aQq3rSNhBYynumxxPE8s14y11DDg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

添加三角形

在画布上添加三角形非常简单，只需要使用 FabricJS 的 Triangle 类，并设置好三角形的属性即可。以下代码展示了如何在画布上添加一个红色的三角形：

// 创建画布

var canvas = new fabric.Canvas('canvas');
// 创建三角形
var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'red',
  left: 50,
  top: 50
});
// 将三角形添加到画布中
canvas.add(triangle);

上述代码中，我们创建了一个宽和高均为100像素，颜色为红色的三角形，并将其左上角定位在画布的 (50, 50) 距离处。

添加阴影

为三角形添加阴影同样非常简单，只需在创建三角形时设置好阴影的属性，即可在画布上看到产生阴影的效果。

方案一：使用 dropShadow 属性

通过设置 FabricJS 中的 dropShadow 属性，我们可以为三角形添加一个阴影，以下代码演示了如何为三角形添加阴影：

// 创建画布

var canvas = new fabric.Canvas('canvas');
// 创建三角形
var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'red',
  left: 50,
  top: 50,
  shadow: {
    color: 'rgba(0, 0, 0, 0.5)',
    blur: 10,
    offsetX: 5,
    offsetY: 5
  }
});
// 将三角形添加到画布中
canvas.add(triangle);

上述代码中，我们在创建三角形时，通过设置其 shadow 属性，指定阴影的颜色、模糊程度、水平和垂直方向的偏移量，其中，color 属性的 rgba(0, 0, 0, 0.5) 值表示黑色，0.5 表示透明度为50%。

方案二：使用 boxShadow 属性

除了使用 dropShadow 属性，我们还可以使用 FabricJS 中的 boxShadow 属性，它与 CSS 中的 box-shadow 属性类似。以下代码演示了如何使用 boxShadow 属性为三角形添加阴影：

// 创建画布

var canvas = new fabric.Canvas('canvas');
// 创建三角形
var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'red',
  left: 50,
  top: 50,
  rx: 10,
  ry: 10
});
// 为三角形添加阴影样式
triangle.setShadow({
  color: 'rgba(0, 0, 0, 0.5)',
  blur: 10,
  offsetX: 5,
  offsetY: 5
});
// 将三角形添加到画布中
canvas.add(triangle);

上述代码中，我们先创建了一个三角形，然后使用 setShadow 方法为其添加阴影，其中，color 属性的 rgba(0, 0, 0, 0.5) 值表示黑色，0.5 表示透明度为50%。需要注意的是，为了防止阴影的边缘过于锐利，我们可以将三角形的 rx 和 ry 属性设置成一个较小的数值（这两个属性代表圆角的半径）。

完整代码

以下是完整的代码示例，包含了在画布上添加三角形并为其添加阴影的全部过程：

// 创建画布

var canvas = new fabric.Canvas('canvas');
// 创建三角形
var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'red',
  left: 50,
  top: 50,
  rx: 10,
  ry: 10
});
// 为三角形添加阴影样式
triangle.setShadow({
  color: 'rgba(0, 0, 0, 0.5)',
  blur: 10,
  offsetX: 5,
  offsetY: 5
});
// 将三角形添加到画布中
canvas.add(triangle);

总结

使用 FabricJS 向三角形添加阴影非常简单，只需要使用 fabric.Triangle 类创建三角形，并为其设置阴影样式即可。在本文中，我们分别介绍了两种添加阴影的方案，分别是使用 dropShadow 属性和 boxShadow 属性。希望本文能够帮助到你。