Home >Web Front-end >JS Tutorial >How to make ellipse invisible using FabricJS?

How to make ellipse invisible using FabricJS?

王林forward: 2023-09-01 23:53:02851browse

如何使用 FabricJS 使椭圆不可见？

In this tutorial, we will learn how to make an ellipse invisible 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. Our ellipse object can be customized in many ways, such as changing its dimensions, adding a background color, or making it visible or invisible. We can do this by using the visible attribute.

Syntax

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

Parameters

Options (optional) - This parameter is a Object Provides additional customization for our ellipse. Using this parameter, you can change the object's color, cursor, stroke width, and many other properties related to the visible property.

Option Key

Visible - This property accepts a Boolean Values 强> Values allow us to render objects onto the canvas. Its default value is True.

Example 1

Pass the visible attribute as a key with a value of "true"

Let Let's take an example to understand what happens when we pass a "true" value to the visible property. By specifying a value of "true" we ensure that the Ellipse object renders to the canvas. This is also the default behavior in FabricJS.

<!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 an Ellipse invisible using FabricJS?</h2>
      <p>The object is visible on the canvas because we have set the <b>visible</b> property to True. 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: 115,
            top: 50,
            rx: 100,
            ry: 70,
            fill: "red",
            visible: true,
         });

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

Example 2

Passing the visible attribute as a key with a value of "false"

In this example, We pass the visible attribute as a key with a value of "false". Assigning a false value will ensure that our ellipse object does not render to the canvas. It just doesn't make the object "invisible" but gets rid of it completely. It can be used to remove an object from the canvas without removing its code.

<!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 an Ellipse invisible using FabricJS?</h2>
      <p>Here the ellipse object is invisible because we have set the <b>visible</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",
            visible: 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 make ellipse invisible 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：Web Assembly using JavaScript (Wasm)Next article：Web Assembly using JavaScript (Wasm)

See more