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

Comment retourner une zone de texte verticalement à l'aide de FabricJS ?

王林

Libérer： 2023-08-26 20:41:09

avant

769 Les gens l'ont consulté

如何使用 FabricJS 垂直翻转文本框？

Dans ce tutoriel, nous apprendrons comment retourner un objet Textbox verticalement à 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. Nous pouvons retourner l'objet zone de texte verticalement en utilisant la propriété flipY.

Syntax

new fabric.Textbox(text: String, { flipY: Boolean }: Object)

Copier après la connexion

Parameters

text - Ce paramètre accepte une String qui est la chaîne de texte que nous voulons utiliser. Vous souhaitez afficher dans notre zone de texte.
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre zone de texte. En utilisant ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur du trait et de nombreuses autres propriétés associées à l'objet dont flipY est la propriété.

Option Key

flipY - Cette propriété accepte une valeur Boolean qui nous permet de retourner l'objet verticalement. < /p>

Exemple 1

Passer FlipY comme clé avec une valeur « fausse »

Regardons un exemple de code nous montrant l'orientation par défaut d'un objet zone de texte dans FabricJS. Puisque nous avons passé une valeur "fausse" à la propriété flipY, le texte ne se retournera pas verticalement.

<!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 flipY as key with a "false" value</h2>
   <p>You can see that the text has not flipped vertically</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 textbox object
      var textbox = new fabric.Textbox("Fall seven times, stand up eight.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipY: false,
      });

      // Create gradient fill
         textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
               { offset: 0, color: "#545a2c" },
               { offset: 1, color: "#6495ed" },
            ],
         })
      );
      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2

Passer la propriété FlipY comme clé avec une valeur de "true"

Dans cet exemple, nous avons un objet zone de texte d'une largeur de 200px avec un remplissage en dégradé linéaire vertical. Lorsque nous appliquons la propriété flipY à l'objet zone de texte, il se retourne verticalement, nous voyons donc également le dégradé et le texte inversés.

<!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 flipY property as key with a "true" value</h2>
   <p>You can see that the text has flipped vertically</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 textbox object
      var textbox = new fabric.Textbox("Fall seven times, stand up eight.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipY: true,
      });

      // Create gradient fill
         textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            colorStops: [
               { offset: 0, color: "#545a2c" },
               { offset: 1, color: "#6495ed" },
            ],
         })
      );
      // 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!