Heim > Artikel > Web-Frontend > Wie lege ich den vertikalen Ursprung der Texttransformation mit FabricJS fest?

Wie lege ich den vertikalen Ursprung der Texttransformation mit FabricJS fest?

王林nach vorne: 2023-08-24 19:49:081464Durchsuche

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS den vertikalen Ursprung von Texttransformationen festlegen. Wir können Text auf der Leinwand anzeigen, indem wir eine Instanz von Fabric.Text hinzufügen. Es ermöglicht uns nicht nur das Verschieben, Skalieren und Ändern der Textabmessungen, sondern bietet auch zusätzliche Funktionen wie Textausrichtung, Textdekoration und Zeilenhöhe, die über die Eigenschaften textAlign, underline bzw. lineHeight verfügbar sind. Ebenso können wir das Attribut originY verwenden, um den vertikalen Ursprung der Transformation festzulegen.

Grammatik

new fabric.Text(text: String , { originY : String }: Object)

Parameter

text – Dieser Parameter akzeptiert einen String, der die Textzeichenfolge ist, die wir anzeigen möchten.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Text zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften ändern, die dem Objekt zugeordnet sind, dessen originY das Attribut ist.

Wahltaste

originY – Diese Eigenschaft akzeptiert einen String-Wert, der es uns ermöglicht, den vertikalen Ursprung der Transformation festzulegen. Mögliche Werte sind „Top“, „Bottom“ und „Center“. Der Standardwert ist „top“.

Beispiel 1

Standarddarstellung von Textobjekten

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Textobjekt ohne Verwendung des originY-Attributs aussieht. In diesem Fall ist der vertikale Ursprung der Transformation oben, was auch die Standardeinstellung ist.

<!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>Default appearance of the Text object</h2>
   <p>You can see that the vertical origin of transformation is towards top</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 text object
      var text = new fabric.Text("Add sample text here.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
      });

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

Beispiel 2

Übergeben Sie das originY-Attribut als Schlüssel zum Wert

In diesem Beispiel werden wir sehen, wie die Zuweisung eines Werts zur Eigenschaft originY den vertikalen Ursprung der Transformation ändert. In diesem Beispiel verwenden wir zwei Textobjekte, um die Unterschiede zu veranschaulichen. Da wir in unserem ersten Textobjekt den Wert als „unten“ übergeben haben, liegt der vertikale Ursprung der Transformation jetzt unten. Auf beide Texte wird das gleiche Top-Attribut von 100 angewendet, aber da sich der vertikale Ursprung der Transformation ändert, befinden sie sich immer noch in unterschiedlichen vertikalen Positionen.

<!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 originY property as key with a value</h2>
   <p>You can see that origin of transformation for the first text object(text1) is bottom while text2 maintains the default vertical origin of transformation</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 text object
      var text1 = new fabric.Text("Text 1", {
         width: 300,
         left: 200,
         top: 100,
         fill: "green",
         originY: "bottom",
      });

      // Initiate a text object
      var text2 = new fabric.Text("Text 2", {
         width: 300,
         left: 50,
         top: 100,
         fill: "red",
      });

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

Das obige ist der detaillierte Inhalt vonWie lege ich den vertikalen Ursprung der Texttransformation mit FabricJS fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String 字符串值传递对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Wie funktioniert Internationalisierung in JavaScript?Nächster Artikel：Wie funktioniert Internationalisierung in JavaScript?

In Verbindung stehende Artikel

Mehr sehen