Heim > Artikel > Web-Frontend > Wie verschiebt man mit FabricJS die Grundlinie eines einzelnen Zeichens im Text?

Wie verschiebt man mit FabricJS die Grundlinie eines einzelnen Zeichens im Text?

PHPznach vorne: 2023-09-01 17:05:031367Durchsuche

如何使用 FabricJS 移动文本中单个字符的基线？

In diesem Tutorial lernen wir, wie man mit FabricJS die Grundlinie eines einzelnen Zeichens im Text verschiebt. 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 die deltaY-Eigenschaft verwenden, um die Grundlinie eines einzelnen Zeichens zu verschieben.

Grammatik

new fabric.Text(text: String , { styles: { deltaY: Number}:Object }: 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. Verwenden Sie diesen Parameter, um die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften zu ändern, die dem Objekt zugeordnet sind, dessen Stil eine Eigenschaft ist.

Wahltaste

styles – Diese Eigenschaft akzeptiert einen Object-Wert, der es uns ermöglicht, einzelnen Zeichen Stile hinzuzufügen.
deltaY – Diese Eigenschaft akzeptiert einen Number-Wert, der es uns ermöglicht, nur die Grundlinie des Stils zu verschieben.

Beispiel 1

Nur Stilattribute als Schlüssel übergeben

In diesem Beispiel können wir sehen, wie man Zeichen mithilfe des Styles-Attributs individuelle Stile hinzufügt. Wie wir in diesem Beispiel sehen können, hat nur das 0. Zeichen einen FontSize von 55, einen FontWeight von Bold und einen FontStyle von „Oblique“. Das Attribut der ersten Ebene ist die Zeilennummer und das Attribut der zweiten Ebene ist das Zeichensymbol. Hier verwenden wir 0, um die erste Zeile und das erste Zeichen darzustellen.

<!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 styles property as key</h2>
   <p>You can see that the first character looks different 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.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
         styles: {
            0: {
               0: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fontStyle: "oblique",
               }
            }
         }
      });

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

Beispiel 2

Übergeben Sie das Attribut „styles“ als Schlüssel zusammen mit dem Attribut „deltaY“

In diesem Beispiel sehen wir, wie man mithilfe der deltaY-Eigenschaft unterschiedliche Grundlinien zu Zeichen hinzufügt. In diesem Fall hat die zweite Zahl in der ersten Zeile (der erste Index) eine andere Grundlinie als das angrenzende Zeichen, da deltaY angegeben 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>Passing the styles property as key along with deltaY property</h2>
   <p> You can see that the second number in the first line has a different baseline </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. H2O", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
         styles: {
            1: {
               0: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fill: "red",
               },
               1: {
                  deltaY: 15,
                  fill: "blue",
               },
               2: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fill: "red",
               },
            },
         },
      });

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

Das obige ist der detaillierte Inhalt vonWie verschiebt man mit FabricJS die Grundlinie eines einzelnen Zeichens im Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String Object 字符串 number 对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Beginnend mit der Mojs-Animationsbibliothek: HTML-KomponentenNächster Artikel：Beginnend mit der Mojs-Animationsbibliothek: HTML-Komponenten

In Verbindung stehende Artikel

Mehr sehen