如何使用 FabricJS 隐藏三角形的控制边框？

1. 概述

在使用 FabricJS 制作图形的过程中，控制边框是一个很方便的功能，能够帮助用户实现拖拽、缩放、旋转等操作。但有时候也会遇到需要隐藏控制边框的需求，比如对于一些不需要交互的图形，或者是需要对图形进行截图、导出等操作的情况。本文将介绍如何使用 FabricJS 隐藏三角形的控制边框。

2. 隐藏控制边框

2.1 获取控制边框元素

在 FabricJS 中，控制边框元素的类型是fabric.Control。因此我们可以通过以下代码获取一个对象的控制边框元素：

var obj = canvas.getObjects()[0];
var controls = obj.getControls();

其中，canvas 表示 FabricJS 的画布对象，getObjects() 方法可以获取到画布上所有的对象，而 getControls() 方法可以获取到指定对象的所有控制边框元素。

2.2 隐藏控制边框

获取到控制边框元素之后，我们可以通过以下代码将其隐藏：

for(var i in controls){
    controls[i].visible = false;
}

其中，visible 属性表示该元素是否可见，将其赋值为 false 即可将控制边框隐藏。

3. 实例演示

下面是一个完整的实例演示，实现了隐藏三角形的控制边框功能：

// 创建画布对象
var canvas = new fabric.Canvas('canvas');
// 创建三角形对象
var triangle = new fabric.Triangle({
    left: 100,
    top: 100,
    width: 100,
    height: 100,
    fill: 'red'
});
// 将三角形对象添加到画布上
canvas.add(triangle);
// 获取三角形对象的控制边框元素
var controls = triangle.getControls();
// 隐藏控制边框
for(var i in controls){
    controls[i].visible = false;
}

在上面的代码中，我们首先创建了一个画布对象，并且创建了一个填充颜色为红色的三角形对象。然后，我们通过 getControls() 方法获取了该三角形对象的控制边框元素，并将其隐藏。最终的效果如下图所示：

4. 总结

本文介绍了如何使用 FabricJS 隐藏三角形的控制边框。通过获取对象的控制边框元素，并将其的 visible 属性设置为 false，即可实现控制边框的隐藏。这个方法同样适用于其他类型的图形对象。