Home > Article > Web Front-end > How to make the control corners of an ellipse transparent using FabricJS?

How to make the control corners of an ellipse transparent using FabricJS?

WBOYforward: 2023-08-24 18:33:02582browse

如何使用 FabricJS 使椭圆的控制角透明？

In this tutorial, we will learn how to make Ellipse’s control corners transparent using FabricJS. The oval is one of the various shapes provided by FabricJS. To create an ellipse, we will create an instance of the Fabric.Ellipse class and add it to the canvas. The transparentCorners property allows us to make the control corners of the ellipse transparent.

Syntax

new fabric.Ellipse( { transparentCorners: 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 transparentCorners is the property.

Options Keys

transparentCorners - This property accepts Boolean Value This allows us to render the object's control corners as transparent. Its default value is True.

Example 1

Passing the transparentCorners property as a key with a value of "false"

Let Let's look at the code that creates an ellipse object with opaque control corners. In order to achieve this, we need to pass a "false" value to the transparentCorners property.

<!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 make controlling corners of Ellipse transparent using FabricJS?</h2>
      <p>Select the object and you will notice that the controlling corners are not transparent. Here we have set the <b>transparentCorners</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: 115,
            top: 50,
            rx: 100,
            ry: 70,
            fill: "red",
            transparentCorners: false,
         });

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

Example 2

Passing transparentCorners as a key with a value of "true"

In this example we Will pass the transparentCorners property with a value of "true". This will ensure that the control corners are rendered transparent. Note that this is also the default behavior.

<!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>Making the controlling corners of an Ellipse transparent using FabricJS</h2>
      <p>Select the object and you will notice that its controlling coners are now transparent as we have applied the <b>transparentCorners</b> property. </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: 115,
            top: 50,
            rx: 100,
            ry: 70,
            fill: "red",
            transparentCorners: true,
         });
     
         // 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 make the control corners of an ellipse transparent 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：How to dynamically create image elements using JavaScript?Next article：How to dynamically create image elements using JavaScript?

See more