Wie füge ich mit FabricJS Linethrough zu IText hinzu?-js-Tutorial-php.cn

Wie füge ich mit FabricJS Linethrough zu IText hinzu?

WBOY

Freigeben： 2023-09-02 22:37:02

nach vorne

1191 Leute haben es durchsucht

如何使用 FabricJS 向 IText 添加 linethrough？

In diesem Tutorial erfahren wir, wie man mit FabricJS Linethrough zu einem IText-Objekt hinzufü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 linethrough mithilfe des Attributs linethrough hinzufügen.

Grammatik

new fabric.IText(text: String , { linethrough: Boolean }: Object)

Nach dem Login kopieren

Parameter

text – Dieser Parameter akzeptiert eine Zeichenfolge, die den Text string darstellt, den 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 Rahmenbreite und viele andere Eigenschaften ändern, die sich auf das Objekt beziehen, dessen Eigenschaft linethrough ist.

Wahltaste

inethrough – Diese Eigenschaft akzeptiert einen Boolean-Wert, mit dem wir angeben können, ob eine durchgehende Textdekoration erforderlich ist.

Beispiel 1

Standarddarstellung von IText-Objekten

Schauen wir uns ein Codebeispiel an, um zu sehen, wie unser IText-Objekt aussieht, wenn die Linethrough-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 IText object</h2>
   <p>You can see that there is no linethrough on text</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",
      });

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

Nach dem Login kopieren

Beispiel 2

Übergeben Sie das Linethrough-Attribut als Schlüssel mit dem Wert true

In diesem Beispiel übergeben wir die Eigenschaft „linethrough“ als Schlüssel mit dem Wert „true“, wodurch „linethrough“ zu unserem IText-Objekt hinzugefügt 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>Passing the linethrough property as key with the value as true</h2>
   <p>You can see that the linethrough has been added</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",
         linethrough: true,
      });

      // 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 Linethrough zu IText hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!