简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

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

PHPz
PHPzforward
2023-08-24 09:21:121384browse

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

In this tutorial, we will learn how to hide the control border of a circle using FabricJS. Circles are one of the various shapes provided by FabricJS. To create a circle, we will create an instance of the Fabric.Circle 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.Circle({ hasBorders: Boolean }: Object)

Parameters

  • Options (optional) - This parameter is a Object Provides additional customization for our circles. Using this parameter, you can change the color, cursor, stroke width and other properties related to the object with hasBorders as the attribute.

    • ul>

    Option Key

    • ##hasBorders - This property accepts Boolean values Value, when set to False, the control border will not be rendered. The default value is True.

    Example 1

    Circle object controls the default appearance of the border

    Let us look at a piece of code that displays the control of the circle border Default appearance. Since the default value of the

    hasBorders property is True, borders are rendered when a circular 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>Hiding the controlling borders of a circle using FabricJS</h2>
      <p>Select the object and notice its controlling borders. This is the default appearance. Although we have not used the <b>hasBorders</b> property, it is by default set to True.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5
         });

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

    Example 2

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

    If the

    hasBorders attribute is Assigned a False value, the border will no longer be rendered. This means that when we select the circular 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>Hiding the controlling borders of a circle using FabricJS</h2>
      <p>Select the object and now you will no longer be able to see its controlling borders, as we have set <b>hasBorders</b> as False.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            hasBorders: false
         });

         // Adding it to the canvas
         canvas.add(circle);
         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 a circle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Implementation of LinkedList in JavascriptNext article：Implementation of LinkedList in Javascript

Related articles

See more