Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk memindahkan objek Line ke bahagian bawah tindanan objek draw?
FabricJS - Bagaimana untuk memindahkan objek Line ke bahagian bawah tindanan objek draw?
- WBOYke hadapan
- 2023-08-24 08:05:12621semak imbas
Dalam tutorial ini, kita akan belajar cara mengalihkan objek Line ke bahagian bawah tindanan objek draw menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garisan dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk mengalihkan objek Line ke bahagian bawah tindanan objek draw, kami menggunakan kaedah sendToBack.
Tatabahasa
sendToBack(): fabric.Object
Gunakan kaedah sendToBack
Contoh
Mari kita lihat contoh kod untuk melihat output apabila menggunakan kaedah sendToBack. Kaedah sendToBack mengalihkan objek ke bahagian bawah tindanan objek lukis. Dalam contoh ini, line2 dihantar selepas line1 menggunakan kaedah 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>
Gunakan kaedah sendToBack
pada tiga objekContoh
Dalam contoh ini, kita menggunakan tiga objek garisan, iaitu line1, line2 dan line3. Walaupun ia telah ditambahkan pada kanvas dalam susunan berangka, line3 jelas terakhir. Ini kerana kami menggunakan kaedah sendToBack, yang menghantar line3 ke bahagian bawah tindanan objek draw.
<!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>
Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memindahkan objek Line ke bahagian bawah tindanan objek draw?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!