Wie kann ich ein Textfeld mit FabricJS horizontal spiegeln?-js-Tutorial-php.cn

Wie kann ich ein Textfeld mit FabricJS horizontal spiegeln?

WBOY

Freigeben： 2023-09-16 13:17:02

nach vorne

1238 Leute haben es durchsucht

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

In diesem Tutorial erfahren wir, wie man mit FabricJS ein Textbox-Objekt horizontal spiegeln kann. Wir können den in das Textfeld geschriebenen Text anpassen, strecken oder verschieben. Um ein Textfeld zu erstellen, müssen wir eine Instanz der Fabric.Textbox-Klasse erstellen und sie der Leinwand hinzufügen. Mit der FlipX-Eigenschaft können wir das Textfeldobjekt horizontal spiegeln.

Syntax

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

Nach dem Login kopieren

Parameter

text – Dieser Parameter akzeptiert einen string, das ist die Textzeichenfolge, die wir in unserem Textfeld anzeigen möchten.
Optionen (optional) – Dieser Parameter ist ein Objekt , das eine zusätzliche Anpassung unseres Textfelds ermöglicht. Mit diesem Parameter können Sie objektbezogene Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern. flipX ist eine Eigenschaft dieses Objekts.

Optionstaste

flipX – Diese Eigenschaft akzeptiert einen booleschen-Wert, der es uns ermöglicht, das Objekt horizontal zu spiegeln.

Beispiel 1

FlipX als Schlüssel mit dem Wert „false“ übergeben

Schauen wir uns ein Codebeispiel an, das uns die Standardausrichtung eines Textfeldobjekts in FabricJS zeigt. Da wir der Eigenschaft flipX einen False-Wert übergeben haben, wird der Text nicht horizontal gespiegelt.

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

Nach dem Login kopieren

Beispiel 2

Übergabe der FlipX-Eigenschaft als Schlüssel mit dem Wert „true“

In diesem Beispiel haben wir ein Textfeldobjekt mit einer Breite von 200 Pixeln und einer horizontalen linearen Farbverlaufsfüllung. Wenn wir die Eigenschaft „flipX“ auf das Textfeldobjekt anwenden, wird der Text horizontal gespiegelt, sodass wir auch den Farbverlauf und die Textspiegelung sehen.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich ein Textfeld mit FabricJS horizontal spiegeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!