Fabric.js | 椭圆可见属性

介绍

Fabric.js 是一个基于 HTML5 canvas 的开源库，它使得使用 canvas 更加容易。它提供了丰富的 API，支持多种图形元素的创建和编辑。其中就包括椭圆。

本文将介绍如何在 Fabric.js 中创建椭圆，以及如何控制椭圆的可见性属性。

创建椭圆

在 Fabric.js 中创建椭圆非常简单，只需要使用 fabric.Ellipse 构造函数即可。

const ellipse = new fabric.Ellipse({
  left: 100,
  top: 100,
  fill: 'red',
  rx: 50,
  ry: 30
});

以上代码将在 canvas 上创建一个左上角坐标为 (100, 100)、填充色为红色、横轴半径为 50、纵轴半径为 30 的椭圆。默认情况下，椭圆会自动添加到 canvas 上。

控制可见性属性

椭圆的可见性属性可以通过设置 visible 属性来控制，其默认值为 true。

ellipse.visible = false;

以上代码将使得椭圆不可见。可以通过设置 visible 属性为 true 来重新使其变为可见。

ellipse.visible = true;

总结

在 Fabric.js 中创建椭圆非常简单，只需要使用 fabric.Ellipse 构造函数即可。通过设置 visible 属性可以控制椭圆的可见性。

完整的代码示例及效果如下：

const canvas = new fabric.Canvas('canvas');
const ellipse = new fabric.Ellipse({
  left: 100,
  top: 100,
  fill: 'red',
  rx: 50,
  ry: 30
});
canvas.add(ellipse);

ellipse.visible = false;