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

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

WBOY

Libérer： 2023-09-16 13:17:02

avant

1287 Les gens l'ont consulté

如何使用 FabricJS 水平翻转文本框？

Dans ce tutoriel, nous allons apprendre à retourner un objet Textbox horizontalement à 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 horizontalement à l'aide de la propriété FlipX.

Syntax

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

Copier après la connexion

Parameters

text - Ce paramètre accepte une string, qui est la chaîne de texte que nous souhaitons 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 les propriétés liées à l'objet telles que la couleur, le curseur, la largeur du trait et bien d'autres propriétés, flipX est une propriété de cet objet.

Touche d'option

flipX - Cette propriété accepte une valeur booléenne qui nous permet de retourner l'objet horizontalement.

Exemple 1

Passer FlipX comme clé avec une valeur "fausse"

Regardons un exemple de code qui nous montre l'orientation par défaut d'un objet zone de texte dans FabricJS. Puisque nous avons passé une valeur False à la propriété flipX, le texte ne sera pas retourné horizontalement.

<!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 flipX as key with a "false" value</h2>
   <p>You can see that the text has not flipped horizontally</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("Each day provides its own gifts.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipX: false,
      });

      // Create gradient fill
      textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
               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é FlipX comme clé avec une valeur "vraie"

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

<!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 flipX property as key with a &lsquo;true&rsquo; value</h2>
   <p>You can see that the text has flipped horizontally</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("Each day provides its own gifts.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipX: true,
      });

      // Create gradient fill
         textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
            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!