在本教程中，我们将使用 fabricjs 创建一个具有边框颜色的三角形。三角形是 fabricjs 提供的各种形状之一。为了创建一个三角形，我们必须创建一个 fabric.triangle 类的实例并将其添加到画布中。
由于 fabricjs 非常灵活，因此我们可以以我们喜欢的任何方式定制我们的三角形对象。 fabricjs 提供的属性之一是 bordercolor，它允许我们在对象处于活动状态时操纵边框的颜色。
语法new fabric.triangle({ bordercolor: string }: object)
参数选项（可选） - 此参数是一个对象 为我们的三角形提供额外的定制。使用此参数，可以更改与 bordercolor 为属性的对象相关的颜色、光标、描边宽度等属性以及许多其他属性。
选项键bordercolor - 此属性接受一个字符串，它指定选择三角形对象时边框的颜色。它的默认值为 rgb(178,204,255)。
示例 1使用 string 值传递 bordercolour 键
让我们看一个代码示例，了解如何为 bordercolor 属性赋值。我们已将值“blue”分配给 bordercolor 键，这有助于在选择三角形对象时创建蓝色边框。
<!doctype html><html><head> <!-- adding the fabric js library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <h2>passing bordercolour key with a string value</h2> <p>select the triangle to see the border colour</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate a triangle object var triangle = new fabric.triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#deb887", bordercolor: "blue", }); // add it to the canvas canvas.add(triangle); </script></body></html>
示例 2将 rgba 值传递给 bordercolor 键
而不是将简单的颜色名称作为字符串传递，我们还可以使用 rgba 值，其分量指定红色、绿色、蓝色和 alpha 的数量，其中 alpha 表示不透明度。在此示例中，我们使用了 rgb(128,0,128)，它是紫色的 rgb 值。
<!doctype html><html><head> <!-- adding the fabric js library--> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script></head><body> <h2>passing an rgba value to the bordercolor key</h2> <p>select the triangle to see the border colour</p> <canvas id="canvas"></canvas> <script> // initiate a canvas instance var canvas = new fabric.canvas("canvas"); canvas.setwidth(document.body.scrollwidth); canvas.setheight(250); // initiate a triangle object var triangle = new fabric.triangle({ left: 105, top: 60, width: 100, height: 70, fill: "#deb887", bordercolor: "rgb(128,0,128)", }); // add it to the canvas canvas.add(triangle); </script></body></html>
以上就是如何使用 fabricjs 创建带有边框颜色的三角形？的详细内容。