Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS eine Leinwand mit Text?

Wie erstelle ich mit FabricJS eine Leinwand mit Text?

王林nach vorne: 2023-08-24 16:49:051532Durchsuche

如何使用 FabricJS 创建带有文本的画布？

In diesem Tutorial lernen wir, wie man mit FabricJS eine Leinwand mit einem Textobjekt erstellt. 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. Ein Unterschied zwischen Text und Textbox besteht darin, dass Textbox interaktiv bearbeitet werden kann, Text jedoch nicht.

Grammatik

new fabric.Text( text: String , options: Object)

Parameter

text – Dieser Parameter akzeptiert String, die Textzeichenfolge, die wir als Text anzeigen möchten.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Textobjekt zusätzliche Anpassungen ermöglicht. Verwenden Sie diesen Parameter, um die Farbe, den Cursor, die Strichstärke und viele andere mit dem Textobjekt verknüpfte Eigenschaften zu ändern.

Beispiel 1

Erstellen Sie eine Instanz von Fabric.Text() und fügen Sie sie der Leinwand hinzu

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man ein Textobjekt zur Leinwand hinzufügt. Der einzige erforderliche Parameter ist die eigentliche Textzeichenfolge, während der zweite Parameter ein optionales Optionsobjekt ist, das es uns ermöglicht, dem Textobjekt unterschiedliche Eigenschaften zuzuweisen.

<!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>Creating an instance of fabric.Text() and adding it to our canvas</h2>
   <p>You can see the text in the canvas now</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", {
         left: 50,
         top: 70,
      });

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

Beispiel 2

Verwenden Sie die Set-Methode, um das Textobjekt zu bedienen

In diesem Beispiel weisen wir einem Textobjekt eine Eigenschaft zu, indem wir die Set-Methode verwenden, die ein Setter für den Wert ist. Alle Eigenschaften in Bezug auf Strich, Strichbreite, Winkel, Skalierung, Drehung usw. können mit dieser Methode geändert werden.

<!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>Manipulating the Text object by using the set method</h2>
   <p>You can see the text in the canvas now with set values</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");

      // Set the properties
      text.set("top", 70);
      text.set("left", 65);
      text.set("fill", "white");
      text.set("fontWeight", "bold");
      text.set("backgroundColor", "#bf94e4");

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

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine Leinwand mit Text?. 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：Erklären Sie die Bedeutung von SafeViewArea in React Native?Nächster Artikel：Erklären Sie die Bedeutung von SafeViewArea in React Native?

In Verbindung stehende Artikel

Mehr sehen