Home >Web Front-end >JS Tutorial >How to hide the control border of a triangle using FabricJS?

How to hide the control border of a triangle using FabricJS?

王林forward: 2023-09-01 08:29:05629browse

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

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.

Syntax

new fabric.Triangle({ hasBorders: Boolean }: Object)

Parameters

Options(optional)− This parameter is a Object 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.

Option Key

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.

Example 1

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>

Example 2

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!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Explore best practices for introducing higher-order components in ReactNext article：Explore best practices for introducing higher-order components in React

See more