Heim > Artikel > Web-Frontend > Wie kann ich ein Textfeld mit FabricJS vertikal spiegeln?

Wie kann ich ein Textfeld mit FabricJS vertikal spiegeln?

王林nach vorne: 2023-08-26 20:41:09788Durchsuche

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

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Textbox-Objekt vertikal spiegeln. 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 Eigenschaft flipY können wir das Textfeldobjekt vertikal spiegeln.

Syntax

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

Parameter

text – Dieser Parameter akzeptiert einen String, der die Textzeichenfolge ist, die wir verwenden möchten. Möchten Sie in unserem Textfeld anzeigen.
Optionen (optional) – Dieser Parameter ist ein Objekt , das eine zusätzliche Anpassung unseres Textfelds ermöglicht. Mit diesem Parameter können Sie Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern, die mit dem Objekt verknüpft sind, dessen Eigenschaft flipY ist.

Optionstaste

flipY – Diese Eigenschaft akzeptiert einen Boolean-Wert, der es uns ermöglicht, das Objekt vertikal zu spiegeln.

Beispiel 1

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

Sehen wir uns ein Codebeispiel an, das uns die Standardausrichtung eines Textfeldobjekts in FabricJS zeigt. Da wir der Eigenschaft flipY einen „falschen“ Wert übergeben haben, wird der Text nicht vertikal 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 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>

Beispiel 2

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

In diesem Beispiel haben wir ein Textfeldobjekt mit einer Breite von 200 Pixeln und einer vertikalen linearen Farbverlaufsfüllung. Wenn wir die flipY-Eigenschaft auf das Textfeldobjekt anwenden, wird es vertikal gespiegelt, sodass wir auch den Farbverlauf und den gespiegelten Text 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 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>

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

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：JavaScript-Programm zum Ermitteln der Länge einer verknüpften ListeNächster Artikel：JavaScript-Programm zum Ermitteln der Länge einer verknüpften Liste

In Verbindung stehende Artikel

Mehr sehen