Heim > Artikel > Web-Frontend > Wie füge ich mit FabricJS Zeichen in IText ein?

Wie füge ich mit FabricJS Zeichen in IText ein?

WBOYnach vorne: 2023-08-31 08:53:03914Durchsuche

In diesem Tutorial erfahren wir, wie man mit FabricJS Zeichen in IText einfügt. Die IText-Klasse wurde in FabricJS Version 1.4 eingeführt, die Fabric.Text erweitert und zum Erstellen von IText-Instanzen verwendet wird. IText-Instanzen geben uns die Freiheit, ohne zusätzliche Konfiguration neuen Text auszuwählen, auszuschneiden, einzufügen oder hinzuzufügen. Es gibt auch verschiedene unterstützte Tastenkombinationen und Maus-/Touch-Kombinationen, um Text interaktiv zu gestalten, die in Text nicht verfügbar sind.

Mit der auf IText basierenden Textbox können wir jedoch die Größe des Textrechtecks ändern und es automatisch umbrechen. Dies ist bei IText nicht der Fall, da sich die Höhe nicht anhand von Zeilenumbrüchen anpasst. Wir können IText-Objekte mithilfe verschiedener Eigenschaften manipulieren. Ebenso können wir Zeichen mit der Methode insertChars einfügen.

Grammatik

insertChars(text: String, style: Array, start: Number, end: Number)

Parameter

text – Dieser Parameter akzeptiert einen String, der den einzufügenden Text angibt.
style – Dieser Parameter akzeptiert ein array, das ein Array von Stilobjekten darstellt, die auf den Text angewendet werden sollen.
start – Dieser Parameter akzeptiert eine Zahl, die die Position angibt, an der das Zeichen eingefügt werden soll.
end – Dieser Parameter akzeptiert eine Nummer, die die Endposition markiert. Der Standardwert ist Start +1.

Beispiel 1

Standarddarstellung von IText-Objekten

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt standardmäßig aussieht, wenn die Methode insertChars nicht verwendet wird. In diesem Fall werden keine Zeichen eingefügt

<!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 IText object</h2>
   <p>You can see that no characters have been inserted.</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 an itext object
      var itext = new fabric.IText(
         "Add Sample Text HereLorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#b666d2",
            backgroundColor: "#f8f4ff",
         }
      );

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

Beispiel 2

Verwenden Sie die Methode insertChars

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, wenn die Methode insertChars verwendet wird. In diesem Beispiel wurde „a“ in den 6. Index an der Position „m“ eingefügt, da dies die Startposition ist. Da wir eine Reihe von Stilen bereitgestellt haben, werden auch die erforderlichen Stiländerungen angewendet.

<!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>Using the insertChars method</h2>
   <p>You can see the character "m" has been replaced with "a"</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 an itext object
      var itext = new fabric.IText(
         "Add Sample Text HereLorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#b666d2",
            backgroundColor: "#f8f4ff",
         }
      );

      // Using the insertChars method
      itext.insertChars("a", [{ fill: "green", fontStyle: "bold" }], 6, 7);

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

Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS Zeichen in IText ein?. 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：Validieren von Formularen mit Parsley.jsNächster Artikel：Validieren von Formularen mit Parsley.js

In Verbindung stehende Artikel

Mehr sehen