Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk memindahkan objek garis ke kedudukan indeks tertentu dalam timbunan objek draw?
FabricJS - Bagaimana untuk memindahkan objek garis ke kedudukan indeks tertentu dalam timbunan objek draw?
- 王林ke hadapan
- 2023-08-23 14:06:201297semak imbas
Dalam tutorial ini, kita akan belajar cara mengalihkan objek Line ke kedudukan indeks yang ditentukan dalam tindanan objek draw menggunakan FabricJS. Elemen Line ialah salah satu elemen asas yang disediakan oleh 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 Garis ke kedudukan indeks yang ditentukan dalam tindanan objek lukisan, kami menggunakan kaedah moveTo.
Tatabahasa
moveTo(index: Number): fabric.Object
Parameter
indeks − Parameter ini menerima nilai Number yang menentukan ke tahap mana dalam tindanan objek cabutan yang ingin kita alihkan objek.
Gunakan kaedah moveTo
Contoh
Mari lihat contoh kod untuk melihat output apabila menggunakan kaedah moveTo. Kaedah moveTo mengalihkan objek ke tahap yang ditentukan dalam tindanan objek seri. Dalam kes ini, gunakan kaedah moveTo untuk menghantar line2 ke indeks ke-0.
<!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 moveTo method</h2>
<p>
You can see that line2 (red) has been moved to the 0th index in 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,
});
// Add both to the canvas
canvas.add(line1);
canvas.add(line2);
// Using moveTo method
line2.moveTo(0);
</script>
</body>
</html>
Gunakan kaedah moveTo dengan tiga objek
Contoh
Dalam contoh ini, kita menggunakan tiga objek garisan, iaitu line1, line2 dan line3. Walaupun ia ditambahkan pada kanvas dalam susunan berangka, line3 jelas berada di belakang line2 pada kedudukan indeks pertama. Ini kerana kami menggunakan kaedah moveTo, yang mengalihkan line3 ke kedudukan indeks pertama, manakala line1 dan line2 masing-masing menduduki kedudukan indeks ke-0 dan ke-2 dalam tindanan objek lukisan .
<!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 moveTo method with three objects</h2>
<p>
You can see that line3 (green) lies in the 1st index which is middle position in stack
</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 moveTo method
line3.moveTo(1);
</script>
</body>
</html>
Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memindahkan objek garis ke kedudukan indeks tertentu dalam timbunan objek draw?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!