Fabric.js | 三角形的 hasBorders 属性

简介

Fabric.js 是一个非常流行的 HTML5 Canvas 库，它提供了一些强大的功能，如图形绘制、图像处理、交互控制等，可以帮助我们快速地构建一些漂亮的图形界面。

在 Fabric.js 中，我们可以使用 Triangle 类来绘制一个三角形。Triangle 类继承自 Polygon 类，因此它拥有 Polygon 的所有属性和方法。而 hasBorders 属性就是 Polygon 类中的一个重要属性，它用于控制对象的边框是否可见。

hasBorders 属性

在 Fabric.js 中，所有的对象都有一个 hasBorders 属性。这个属性控制对象是否显示边框。如果对象的 hasBorders 属性为 true，则边框将会显示；如果对象的 hasBorders 属性为 false，则边框将不会显示。

默认情况下，Triangle 类的 hasBorders 属性为 true，因此绘制的三角形会有一个边框。我们可以通过以下代码来创建一个带有边框的三角形：

var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'red',
  strokeWidth: 2,
  hasBorders: true
});

如果我们将 hasBorders 属性修改为 false，那么这个三角形就不会有边框了。代码如下：

var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'red',
  strokeWidth: 2,
  hasBorders: false
});

总结

通过 hasBorders 属性，我们可以轻松地控制对象的边框是否可见。在 Triangle 类中，hasBorders 属性的默认值为 true，因此绘制的三角形会有一个边框。如果我们将 hasBorders 属性修改为 false，则三角形就不会有边框了。

返回的代码片段：

## hasBorders 属性

在 Fabric.js 中，所有的对象都有一个 hasBorders 属性。这个属性控制对象是否显示边框。如果对象的 hasBorders 属性为 true，则边框将会显示；如果对象的 hasBorders 属性为 false，则边框将不会显示。

默认情况下，Triangle 类的 hasBorders 属性为 true，因此绘制的三角形会有一个边框。我们可以通过以下代码来创建一个带有边框的三角形：

```js
var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'red',
  strokeWidth: 2,
  hasBorders: true
});

如果我们将 hasBorders 属性修改为 false，那么这个三角形就不会有边框了。代码如下：

var triangle = new fabric.Triangle({
  width: 100,
  height: 100,
  fill: 'red',
  strokeWidth: 2,
  hasBorders: false
});

通过 hasBorders 属性，我们可以轻松地控制对象的边框是否可见。在 Triangle 类中，hasBorders 属性的默认值为 true，因此绘制的三角形会有一个边框。如果我们将 hasBorders 属性修改为 false，则三角形就不会有边框了。