Comment définir l'opacité du rectangle à l'aide de FabricJS ?-js tutoriel-php.cn

Table des matières

Syntaxe

Paramètres

Option Key

Exemple 2

Maison

interface Web

js tutoriel

Comment définir l'opacité du rectangle à l'aide de FabricJS ?

Sep 21, 2023 am 08:01 AM

如何使用 FabricJS 设置矩形的不透明度？

Dans ce tutoriel, nous apprendrons comment définir l'opacité d'un rectangle à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. afin de créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter à

Nous pouvons personnaliser l'objet rectangulaire en ajoutant une couleur de remplissage, en supprimant ses bordures et même en modifiant ses dimensions. De même, nous pouvons également utiliser la propriété opacity pour modifier son opacité.

Syntaxe

new fabric.Rect({ opacity: Number }: Object)

Copier après la connexion

Paramètres

Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre rectangle. À l'aide de ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés liées aux objets dont l'opacité est un attribut.

Option Key

opacity - Cette propriété accepte un Number qui nous permet de contrôler l'opacité de l'objet. La valeur par défaut de l'attribut d'opacité est 1.

Exemple 1

Apparence par défaut d'un objet rectangulaire

< p>Regardons un exemple de code pour voir à quoi ressemble notre objet rectangulaire avec la valeur par défaut de la propriété opacity. Dans cet exemple, nous ne transmettons aucune clé d'opacité à la classe comme indiqué ci-dessous

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Default appearance of a rectangle object&lt;/h2&gt;
   &lt;p&gt;You can see our rectangle is fully opaque&lt;/p&gt;
   &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
   &lt;script&gt;
      // Initiate a canvas instance
      var canvas = new fabric.Canvas(&quot;canvas&quot;);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: &quot;#ffb347&quot;,
         padding: 9,
         stroke: &quot;#191970&quot;,
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Exemple 2

Passer l'attribut opacity comme clé

Dans cet exemple, nous verrons comment attribuer la valeur aux changements de propriété Opacity L'opacité de l'objet rectangulaire dans le canevas. Ici, nous utilisons 0,3 comme opacité En conséquence, notre objet rectangulaire apparaît semi-transparent plutôt que totalement opaque.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Passing the opacity property as key&lt;/h2&gt;
   &lt;p&gt;You can see our rectangle is not fully opaque&lt;/p&gt;
   &lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
   &lt;script&gt;
      // Initiate a canvas instance
      var canvas = new fabric.Canvas(&quot;canvas&quot;);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: &quot;#ffb347&quot;,
         padding: 9,
         stroke: &quot;#191970&quot;,
         strokeWidth: 5,
         opacity: 0.3,
      });

      // Add it to the canvas
      canvas.add(rect);
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn