Comment ajouter une ombre à une zone de texte à l'aide de FabricJS ?-js tutoriel-php.cn

Comment ajouter une ombre à une zone de texte à l'aide de FabricJS ?

王林

Libérer： 2023-09-12 18:33:02

avant

1643 Les gens l'ont consulté

如何使用 FabricJS 向文本框添加阴影？

Dans ce tutoriel, nous apprendrons comment ajouter une ombre à une zone de texte à l'aide de FabricJS. Nous pouvons personnaliser, étirer ou déplacer le texte écrit dans la zone de texte. Afin de créer une zone de texte, nous devons créer une instance de la classe Fabric.Textbox et l'ajouter au canevas. Notre objet zone de texte peut être personnalisé de plusieurs manières, par exemple en modifiant ses dimensions, en ajoutant une couleur d'arrière-plan ou même en y ajoutant une ombre. Nous pouvons ajouter une ombre à la zone de texte en utilisant la propriété shadow.

Syntax

new fabric.Textbox(text: String, { shadow : fabric.Shadow }: Object)

Copier après la connexion

Parameters

text - Ce paramètre accepte une chaîne qui est le texte que nous string souhaitons afficher dans notre zone de texte.
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre zone de texte. À l'aide de ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées aux objets dont l'ombre est un attribut.

Option Key

shadow - Cette propriété accepte un objet fabric.Shadow qui nous permet d'ajouter une ombre à l'objet Textbox. Par exemple, pour ajouter une ombre à un objet Textbox, nous devons créer une nouvelle instance Fabric.Shadow, puis attribuer cette instance à la propriété Shadow.

Exemple 1

Passer un objet shadow à la propriété shadow

Regardons un exemple de code pour voir comment attribuer une valeur à la propriété shadow afin d'ajouter un shadow à notre zone de texte objet . Tout d'abord, nous devons créer une nouvelle instance de fabric.Shadow, puis attribuer cette instance à notre propriété shadow.

<!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>Passing the shadow object to the shadow property</h2>
   <p>You can see that a blue shadow has been added to the textbox</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow instance
      var shadow = new fabric.Shadow({
         color: "blue",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Passer des valeurs RGBA à l'objet ombre

Nous pouvons également ajuster l'ombre et lui donner une apparence floue en spécifiant des valeurs RGBA, représentant le rouge, le vert, le bleu et l'alpha. Alpha détermine l'opacité de la couleur.

<!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>Passing an RGBA value to the shadow object</h2>
   <p>You can see the shadow created using RGBA colour value</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a shadow instance
      var shadow = new fabric.Shadow({
         color: "rgba(0,0,205, 0.7)",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

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!