Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk memindahkan objek Line ke bahagian atas tindanan objek draw?
Dalam tutorial ini, kita akan belajar cara mengalihkan objek Line ke bahagian atas 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 atas tindanan objek draw, kami menggunakan kaedah bringToFront.
bringToFront(): fabric.Object
Mari lihat contoh kod untuk melihat output apabila menggunakan kaedah bringToFront. Kaedah bringToFront mengalihkan objek ke bahagian atas tindanan objek lukisan. Dalam contoh ini, gunakan kaedah bringToFront untuk menggerakkan line1 di atas line2.
<!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 bringToFront method</h2> <p>You can see that line1 (blue) lies above line2 (red)</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 bringToFront method line1.bringToFront(); </script> </body> </html>
Dalam contoh ini, kita menggunakan tiga objek garisan, iaitu line1, line2 dan line3. Walaupun ia telah ditambahkan pada kanvas dalam susunan berangka, line1 jelas berada di bahagian atas. Ini kerana kami menggunakan kaedah bringToFront, yang menghantar line1 ke bahagian atas tindanan objek seri.
<!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 bringToFront method with three objects</h2> <p> You can see that line1 (blue) lies at the top 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 bringToFront method line1.bringToFront(); </script> </body> </html>
Atas ialah kandungan terperinci FabricJS - Bagaimana untuk memindahkan objek Line ke bahagian atas tindanan objek draw?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!