Heim > Artikel > Web-Frontend > Wie verlasse ich den Bearbeitungsstatus in IText mit FabricJS?

Wie verlasse ich den Bearbeitungsstatus in IText mit FabricJS?

PHPznach vorne: 2023-09-07 14:29:101129Durchsuche

In diesem Tutorial erfahren Sie, wie Sie den Bearbeitungsstatus in IText mithilfe von FabricJS verlassen. 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 „exitEditing“ verwenden, um den Bearbeitungsstatus zu verlassen.

Grammatik

exitEditing(): Itext.IText

Beispiel 1

Nur das isEditing-Attribut verwenden

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, wenn die isEditing-Eigenschaft allein verwendet wird und ein wahrer Wert übergeben wird, um den Bearbeitungsmodus zu aktivieren. Da wir die Methode „exitEditing()“ nicht verwenden, befindet sich unser IText-Objekt im Bearbeitungsmodus.

<!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 isEditing property only</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",
         isEditing: true,
      });

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

Beispiel 2

Verwenden Sie die Methode „exitEditing“ mit dem Attribut „isEditing“

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein IText-Objekt aussieht, wenn die Methode „exitEditing“ in Verbindung mit der Eigenschaft „isEditing“ verwendet wird. Da wir der Eigenschaft isEditing einen wahren Wert übergeben haben, sollte sich das IText-Objekt im Bearbeitungsmodus befinden. Sobald wir jedoch die Methode „exitEditing“ verwenden, wird der Bearbeitungsmodus beendet.

<!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 exitEditing method along with the isEditing property</h2>
   <p>You can see that the editing mode is off even though we have passed the isEditing property a true value</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",
         isEditing: true,
      });

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

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

Das obige ist der detaillierte Inhalt vonWie verlasse ich den Bearbeitungsstatus in IText mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Wie ändere ich Text und Bilder durch Klicken auf eine Schaltfläche in JavaScript?Nächster Artikel：Wie ändere ich Text und Bilder durch Klicken auf eine Schaltfläche in JavaScript?

In Verbindung stehende Artikel

Mehr sehen