Maison > Article > interface Web > Comment déplacer un objet vers le haut de la pile d'objets dessinés dans IText à l'aide de FabricJS ?
Comment déplacer un objet vers le haut de la pile d'objets dessinés dans IText à l'aide de FabricJS ?
- PHPzavant
- 2023-09-05 10:57:06740parcourir
Dans ce tutoriel, nous apprendrons comment déplacer un objet vers le haut de la pile d'objets dessinés dans IText à l'aide de FabricJS. La classe IText a été introduite dans FabricJS version 1.4, qui étend Fabric.Text et est utilisée pour créer des instances IText. Les instances IText nous donnent la liberté de sélectionner, couper, coller ou ajouter un nouveau texte sans configuration supplémentaire. Il existe également diverses combinaisons de touches et combinaisons souris/tactile prises en charge pour rendre le texte interactif qui ne sont pas disponibles dans Texte.
Cependant, Textbox basé sur IText nous permet de redimensionner le rectangle de texte et de l'envelopper automatiquement. Ce n'est pas le cas pour IText, car la hauteur ne s'ajuste pas en fonction des sauts de ligne. Nous pouvons manipuler des objets IText en utilisant diverses propriétés. De même, nous pouvons utiliser la méthode BringToFront pour déplacer un objet vers le haut de la pile d'objets dessinés.
Grammaire
bringToFront(): fabric.Object
Exemple 1
Ne pas utiliser la méthode bringToFront
Regardons un exemple de code pour voir comment un objet IText se comporte sans utiliser la méthode BringToFront. Dans cet exemple, nous initialisons deux objets IText, itext1 et itext2. Vous pouvez remarquer que le deuxième texte recouvre le premier texte, le cachant derrière.
<!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>
Exemple 2
Utilisez la méthode bringToFront
Regardons un exemple de code pour voir comment un objet IText se comporte lors de l'utilisation de la méthode BringToFront. Dans ce cas, notre objet itext1 sera désormais en haut de la pile, il ne sera donc plus caché derrière itext2.
<!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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!