Maison > Article > interface Web > Comment rendre l'ellipse invisible à l'aide de FabricJS ?

Comment rendre l'ellipse invisible à l'aide de FabricJS ?

王林avant: 2023-09-01 23:53:02811parcourir

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

Dans ce tutoriel, nous apprendrons comment rendre une ellipse invisible à l'aide de FabricJS. L'ovale est l'une des différentes formes fournies par FabricJS. Pour créer une ellipse, nous allons créer une instance de la classe Fabric.Ellipse et l'ajouter au canevas. Notre objet ellipse peut être personnalisé de plusieurs manières, par exemple en modifiant ses dimensions, en ajoutant une couleur de fond ou en le rendant visible ou invisible. Nous pouvons le faire en utilisant l'attribut visible.

Syntaxe

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

Paramètres

Options (facultatif) - Ce paramètre est un Objet offrant une personnalisation supplémentaire à notre ellipse. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés de l'objet liées à l'attribut visible.

Option Key

Visible - Cette propriété accepte une valeur Boolean 强> qui nous permet de restituer l'objet sur le canevas. Sa valeur par défaut est True.

Exemple 1

Passer l'attribut visible comme clé avec une valeur « vraie »

Prenons un exemple pour comprendre ce qui se passe lorsque nous transmettons une valeur « vraie » à l'attribut visible. En spécifiant la valeur « true », nous garantissons que l'objet Ellipse s'affiche sur le canevas. C'est également le comportement par défaut dans 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>

Exemple 2

Passer l'attribut visible comme clé avec une valeur de "false"

Dans cet exemple, nous transmettons l'attribut visible comme clé avec une valeur de "false". L'attribution d'une valeur fausse garantira que notre objet ellipse ne sera pas rendu sur le canevas. Cela ne rend tout simplement pas l'objet "invisible", mais le supprime complètement. Il peut être utilisé pour supprimer un objet du canevas sans supprimer son 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Assemblage Web utilisant JavaScript (Wasm)Article suivant：Assemblage Web utilisant JavaScript (Wasm)

Articles Liés

Voir plus