Home > Article > Web Front-end > How to hide the control border of an ellipse using FabricJS?

How to hide the control border of an ellipse using FabricJS?

王林forward: 2023-08-24 15:17:04701browse

如何使用 FabricJS 隐藏椭圆的控制边框？

In this tutorial, we will learn how to hide the control border of an ellipse using FabricJS. The oval is one of the various shapes provided by FabricJS. In order to create an ellipse, we must create an instance of the Fabric.Ellipse class and add it to the canvas. We can customize the control borders in many ways, such as adding specific colors, dash patterns, etc. However, we can also eliminate the borders entirely using the hasBorders property.

Syntax

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

Parameters

Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with the object for which hasBorders is a property.

Option Key

##hasBorders - This property accepts a Boolean Value em>When set to False, the control border will not be rendered. The default value is True.

Example 1

The default appearance of the ellipse object control border

The following example shows the default appearance of the ellipse control border . Since the default value of the

hasBorders property is "true", borders are rendered when the ellipse 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>How to hide the controlling borders of an Ellipse using FabricJS?</h2>
      <p>Select the object and you would get to see the controlling borders. This is the default behavior.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 105,
            top: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            stroke: "#c154c1",
            strokeWidth: 5,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Pass hasBorders as key and assign it the value "false"

The >hasBorders property is assigned a value of "false" and the borders will no longer be rendered. This means that when we select the ellipse 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>How to hide the controlling borders of an Ellipse using FabricJS?</h2>
      <p>Select the object. Now you won&#39;t get to see the controlling borders because we have set the <b>hasBorders</b> property to False. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 105,
            top: 100,
            fill: "white",
            rx: 100,
            ry: 60,
            stroke: "#c154c1",
            strokeWidth: 5,
            hasBorders: false,
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

The above is the detailed content of How to hide the control border of an ellipse 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：How to open webcam using JavaScript?Next article：How to open webcam using JavaScript?

See more

How to hide the control border of an ellipse using FabricJS?

Syntax

Parameters

Option Key

Related articles