Wie verschiebe ich ein Objekt mithilfe von FabricJS an den Anfang des Zeichenobjektstapels in IText?-js-Tutorial-php.cn

Wie verschiebe ich ein Objekt mithilfe von FabricJS an den Anfang des Zeichenobjektstapels in IText?

PHPz

Freigeben： 2023-09-05 10:57:06

nach vorne

809 Leute haben es durchsucht

如何使用 FabricJS 将对象移动到 IText 中绘制对象堆栈的顶部？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Objekt an die Spitze des Zeichenobjektstapels in IText verschieben. 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 BringToFront-Methode verwenden, um ein Objekt an die Spitze des Zeichenobjektstapels zu verschieben.

Grammatik

bringToFront(): fabric.Object

Nach dem Login kopieren

Beispiel 1

Verwenden Sie nicht die bringToFront-Methode

Sehen wir uns ein Codebeispiel an, um zu sehen, wie sich ein IText-Objekt verhält, ohne die BringToFront-Methode zu verwenden. In diesem Beispiel initialisieren wir zwei IText-Objekte, itext1 und itext2. Sie können feststellen, dass der zweite Text den ersten Text überdeckt und ihn dahinter verbirgt.

<!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 bringToFront method</h2>
   <p> You can see that the first itext object is hidden behind the second itext object </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 itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });

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

Nach dem Login kopieren

Beispiel 2

Verwenden Sie die bringToFront-Methode

Sehen wir uns ein Codebeispiel an, um zu sehen, wie sich ein IText-Objekt verhält, wenn es die BringToFront-Methode verwendet. In diesem Fall befindet sich unser itext1-Objekt jetzt oben im Stapel, sodass es nicht mehr hinter itext2 verborgen 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>Using the bringToFront method</h2>
   <p> You can see that the first itext object is no longer hidden behind the second itext object </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 itext1 = new fabric.IText("First itext object.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "#b666d2",
         fontStyle: "bold",
         backgroundColor: "#f8f4ff",
      });

      // Initiate another itext object
      var itext2 = new fabric.IText("Second itext object.", {
         width: 300,
         left: 130,
         top: 90,
         fill: "white",
         backgroundColor: "#c8a2c8",
      });
      
      // Add it to the canvas
      canvas.add(itext1);
      canvas.add(itext2);

      // Using the bringToFront method
      itext1.bringToFront();
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie verschiebe ich ein Objekt mithilfe von FabricJS an den Anfang des Zeichenobjektstapels in IText?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!