Maison > Article > interface Web > Comment rendre les coins de contrôle d'une ellipse transparents à l'aide de FabricJS ?

Comment rendre les coins de contrôle d'une ellipse transparents à l'aide de FabricJS ?

WBOYavant: 2023-08-24 18:33:02582parcourir

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

Dans ce tutoriel, nous apprendrons comment rendre les coins de contrôle d'Ellipse transparents à 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. La propriété transparentCorners nous permet de rendre transparents les coins de contrôle de l'ellipse.

Syntaxe

new fabric.Ellipse( { transparentCorners: 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 bien d'autres propriétés liées à l'objet dont transparentCorners est la propriété.

Options Keys

transparentCorners - Cette propriété accepte une valeur Boolean qui nous permet de rendre les coins de contrôle de l'objet transparents. Sa valeur par défaut est True.

Exemple 1

Passer la propriété transparentCorners comme clé avec une valeur de "false"

Regardons le code qui crée un objet ellipse avec des coins de contrôle opaques. Pour y parvenir, nous devons transmettre une "fausse" valeur à la propriété transparentCorners.

<!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>

Exemple 2

Passer transparentCorners comme clé avec une valeur "vraie"

Dans cet exemple, nous transmettons l'attribut transparentCorners avec une valeur "vraie". Cela garantira que les coins de contrôle seront rendus transparents. Notez qu'il s'agit également du comportement par défaut.

<!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>

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：Comment créer dynamiquement des éléments d’image en utilisant JavaScript ?Article suivant：Comment créer dynamiquement des éléments d’image en utilisant JavaScript ?

Articles Liés

Voir plus