Heim > Artikel > Web-Frontend > Wie verwende ich FabricJS, um mithilfe von Funktionen in IText in den Bearbeitungsstatus zu gelangen?

Wie verwende ich FabricJS, um mithilfe von Funktionen in IText in den Bearbeitungsstatus zu gelangen?

王林nach vorne: 2023-08-28 12:01:17933Durchsuche

In diesem Tutorial erfahren Sie, wie Sie mithilfe der IText-Funktion in FabricJS in den Bearbeitungsstatus gelangen. 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 die Methode enterEditing verwenden, um in den Bearbeitungsstatus zu gelangen.

Grammatik

enterEditing(): fabric.IText

Beispiel 1

Verwenden Sie nicht die EnterEditing-Methode

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, ohne die EnterEditing-Methode zu verwenden.

<!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>Without using the enterEditing method</h2>
   <p>You can see that the editing mode is off</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: "red",
      });

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

Beispiel 2

Verwenden Sie die EnterEditing-Methode

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, wenn es mit der Methode enterEditing in den Bearbeitungszustand wechselt. In diesem Fall befindet sich unser itext-Objekt jetzt im Bearbeitungsmodus, da der Cursor dort 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>Without using the enterEditing method</h2>
   <p>You can see that the editing mode is on</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: "red",
      });

      // Add it to the canvas
      canvas.add(itext);

      // Using enterEditing method
      itext.enterEditing();
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie verwende ich FabricJS, um mithilfe von Funktionen in IText in den Bearbeitungsstatus zu gelangen?. 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：Wie konvertiere ich eine Liste von Elementen in einem Array mit jQuery?Nächster Artikel：Wie konvertiere ich eine Liste von Elementen in einem Array mit jQuery?

In Verbindung stehende Artikel

Mehr sehen