In this tutorial, we will learn how to hide the control border of a triangle using FabricJS. Triangle is one of the various shapes provided by FabricJS. In order to create a triangle, we must create an instance of the Fabric.Triangle class and add it to the canvas.
We can customize the control border in many ways, such as adding specific colors, dotted patterns, etc. to it. We can also remove borders completely using the hasBorders property.
new fabric.Triangle({ hasBorders: Boolean }: Object)Options(optional)− This parameter is a Object< /em> Provides additional customization to our triangle. Using this parameter, you can change properties related to the object for which hasBorders is an attribute, such as color, cursor, stroke width, and many other properties.
hasBorders - This property accepts a boolean value, which helps to the rendering control boundaries. When set to False, the control border will not be rendered. The default value is true.
Default appearance of the triangle object control border
Let's look at a code example that shows the control The default appearance of triangle borders. Since the default value of the hasBorders property is True, borders are rendered when the triangle object is selected.
<!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>Default appearance of the controlling borders of a triangle object</h2>
<p>Select the triangle to see its controlling borders</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: 75,
width: 90,
height: 80,
fill: "#ff878d",
stroke: "#674846",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Pass hasBorders as a key and assign it the value of "false"
If the hasBorders attribute is When specified as a False value, the border will no longer be rendered. This means that when we select the triangle object, the control border will be hidden.
<!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 hasBorders as key and assigning it "false"</h2>
<p>Select the triangle and observe that its controlling borders have not been rendered.</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: 75,
width: 90,
height: 80,
fill: "#ff878d",
stroke: "#674846",
strokeWidth: 5,
hasBorders: false,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>The above is the detailed content of How to hide the control border of a triangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
