Wie füge ich mit FabricJS Leerzeichen zwischen Zeichen in IText hinzu?-js-Tutorial-php.cn

Wie füge ich mit FabricJS Leerzeichen zwischen Zeichen in IText hinzu?

PHPz

Freigeben： 2023-09-02 12:49:08

nach vorne

667 Leute haben es durchsucht

如何使用 FabricJS 在 IText 中的字符之间添加空格？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS Leerzeichen zwischen Zeichen in einem IText-Objekt hinzufügen. 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 mit der Eigenschaft charSpacing zusätzliche Leerzeichen zwischen den einzelnen Zeichen hinzufügen.

Grammatik

new fabric.IText(text: String , { charSpacing: Number }: Object)

Nach dem Login kopieren

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 IText-Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Strichstärke und viele andere Eigenschaften des IText-Objekts im Zusammenhang mit der charSpacing-Eigenschaft ändern.

Wahltaste

charSpacing – Diese Eigenschaft akzeptiert eine Zahl, mit der wir den zusätzlichen Abstand zwischen Zeichen steuern können. Ausgedrückt in Einheiten von Tausend em.

Beispiel 1

Standarddarstellung von IText-Objekten

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt standardmäßig aussieht, wenn die charSpacing-Eigenschaft nicht verwendet wird.

<!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 a IText object</h2>
   <p>You can see the default appearance of IText object when charSpacing property is not used </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 Here.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "green",
            fontStyle: "bold",
         }
      );

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

Nach dem Login kopieren

Beispiel 2

Übergeben Sie das charSpacing-Attribut als Schlüssel

In diesem Beispiel sehen wir, wie man der Eigenschaft charSpacing einen Wert zuweist, um zusätzliche Leerzeichen zwischen Zeichen einzufügen. In diesem Fall haben wir einen Wert von 100 übergeben, sodass sich der Platz entsprechend vergrößert.

<!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 charSpacing property as key</h2>
  <p>You can see the space between each character has increased</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 Here.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "green",
         fontStyle: "bold",
         charSpacing: 100,
      });

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS Leerzeichen zwischen Zeichen in IText hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!