Maison >interface Web >js tutoriel >Comment rendre un cercle invisible avec FabricJS ?

Comment rendre un cercle invisible avec FabricJS ?

WBOYavant: 2023-08-26 22:49:11738parcourir

Dans ce tutoriel, nous allons apprendre à rendre un cercle invisible à l'aide de FabricJS. Circle est l'une des différentes formes fournies par FabricJS. Afin de créer un cercle, nous devons créer une instance de la classe fabric.Circle et l'ajouter au canevas. Notre objet cercle peut être personnalisé de nombreuses manières, par exemple en modifiant ses dimensions, en ajoutant une couleur d'arrière-plan ou en le rendant visible ou invisible. Nous pouvons y parvenir en utilisant l'attribut visible.

Syntaxe

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

Paramètres

options (facultatif) - Ce paramètre est un objet qui fournit des options pour une personnalisation supplémentaire de notre cercle. Grâce à ce paramètre, vous pouvez modifier les propriétés liées à cet objet telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés, dont visible est une propriété.

Touche d'option

visible - Cette propriété accepte une valeur booléenne 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é et lui donner une valeur 'vraie'

Voyons un code pour comprendre ce qui se passe lorsque nous passons à l'attribut visible une valeur True Quoi. En spécifiant la valeur comme « vrai », nous garantissons que notre objet cercle est rendu sur le canevas. C'est également le comportement par défaut de 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>Making a circle invisible using FabricJS</h2>
      <p>Here, the circle is visible because we have set <b>visible</b> to True. This is the default behavior. So, even if we don&#39;t apply the <b>visible</b> property, it will be set to True, by defalt. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "#adff2f",
            radius: 50,
            stroke: "#228b22",
            visible: true
         });

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

Exemple 2

Passer la propriété visible en tant que clé et la définir sur une valeur « fausse »

Dans cet exemple, nous transmettons la propriété visible en tant que clé et la définissons sur une valeur False. Définir cette valeur sur false garantira que notre objet cercle ne sera pas rendu sur le canevas. Cela ne rend pas seulement l'objet « invisible », cela 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>Making a circle invisible using FabricJS</h2>
      <p>Notice that the circle is invisible here, as we have set <b>visible</b> to False. </p>
      <canvas id="canvas"></canvas>
   
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "#adff2f",
            radius: 50,
            stroke: "#228b22",
            visible: false
         });
   
         // Adding it to the canvas
         canvas.add(cir);
         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：Rechercher le temps écoulé en JavaScriptArticle suivant：Rechercher le temps écoulé en JavaScript

Articles Liés

Voir plus