Maison > Article > interface Web > FabricJS - Comment déplacer un objet Line vers le bas de la pile d'objets dessinés ?
FabricJS - Comment déplacer un objet Line vers le bas de la pile d'objets dessinés ?
- WBOYavant
- 2023-08-24 08:05:12621parcourir
Dans ce tutoriel, nous apprendrons comment déplacer un objet Line vers le bas de la pile d'objets de dessin à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance de fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour déplacer l'objet Line vers le bas de la pile d'objets de dessin, nous utilisons la méthode sendToBack.
Grammaire
sendToBack(): fabric.Object
Utilisez la méthode sendToBack
Exemple
Regardons un exemple de code pour voir le résultat lors de l'utilisation de la méthode sendToBack. La méthode sendToBack déplace l'objet vers le bas de la pile d'objets dessinés. Dans cet exemple, line2 est envoyé après line1 en utilisant la méthode sendToBack.
<!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 sendToBack method</h2>
<p>You can see that line2 (red) lies behind line1 (blue)</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 a Line object
var line1 = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Initiate another Line object
var line2 = new fabric.Line([200, 70, 70, 40], {
stroke: "red",
strokeWidth: 20,
});
// Add both to the canvas
canvas.add(line1);
canvas.add(line2);
// Using sendToBack method
line2.sendToBack();
</script>
</body>
</html>
Utilisez la méthode sendToBack
sur trois objetsExemple
Dans cet exemple, nous utilisons trois objets ligne, à savoir line1, line2 et line3. Même s'ils ont été ajoutés au canevas par ordre numérique, line3 est évidemment le dernier. En effet, nous utilisons la méthode sendToBack, qui envoie line3 au bas de la pile d'objets dessinés.
<!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 sendToBack method with three objects</h2>
<p>
You can see that line3 (green) lies at the bottom of the stack of drawn objects
</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 a Line object
var line1 = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Initiate another Line object
var line2 = new fabric.Line([200, 70, 70, 40], {
stroke: "red",
strokeWidth: 20,
});
// Initiate another Line object
var line3 = new fabric.Line([200, 30, 30, 90], {
stroke: "green",
strokeWidth: 20,
});
// Add them all to the canvas
canvas.add(line1);
canvas.add(line2);
canvas.add(line3);
// Using sendToBack method
line3.sendToBack();
</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!