Heim > Artikel > Web-Frontend > Wie verschiebe ich ein Objekt mithilfe von FabricJS an den Anfang des Zeichenobjektstapels in IText?
Wie verschiebe ich ein Objekt mithilfe von FabricJS an den Anfang des Zeichenobjektstapels in IText?
- PHPznach vorne
- 2023-09-05 10:57:06738Durchsuche
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
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>
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>
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!