Rumah >hujung hadapan web >tutorial js >Bagaimana untuk membuat objek poligon bertindak balas terhadap acara zum menggunakan FabricJS?
Kita boleh mencipta objek Poligon dengan mencipta contoh fabric.Polygon. Objek poligon boleh dicirikan sebagai sebarang bentuk tertutup yang terdiri daripada satu set segmen garis lurus yang bersambung. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Kami menggunakan acara scaling untuk menunjukkan cara objek poligon bertindak balas terhadap penskalaan.
polygon.on(“scaling”, callbackFunction);
Mari lihat contoh kod untuk melihat cara objek poligon bertindak balas apabila peristiwa zum berlaku. Kita boleh skala objek dengan menyeret mana-mana kawalan sudut. Di sini, apabila objek berskala, peristiwa skala akan dicetuskan secara berterusan.
<!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>Displaying how the object reacts to the scaling event</h2> <p> You can scale the polygon object and open the console from dev tools to see the logged output </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 polygon instance var polygon = new fabric.Polygon( [ { x: 0, y: 0 }, { x: 0, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 0 }, ], { left: 100, top: 30, fill: "red", stroke: "blue", strokeWidth: 3, objectCaching: false, } ); // Adding it to the canvas canvas.add(polygon); // Using the scaling event polygon.on("scaling", () => { canvas.renderAll(); console.log("The object is being scaled"); }); </script> </body> </html>
Mari lihat contoh kod untuk melihat cara menukar warna lejang apabila peristiwa zoom berlaku. Kami menggunakan kaedah yang ditetapkan untuk menetapkan warna lejang poligon kepada "oren". Jadi apabila kita skala objek, warna stroknya akan berubah menjadi oren.
<!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>Changing the stroke colour when scaling happens</h2> <p> You can see that the stroke colour changes when the polygon is scaled </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 polygon instance var polygon = new fabric.Polygon( [ { x: 500, y: 20 }, { x: 550, y: 60 }, { x: 550, y: 200 }, { x: 350, y: 200 }, { x: 350, y: 60 }, { x: 500, y: 20 }, ], { fill: "red", stroke: "blue", strokeWidth: 5, objectCaching: false, top: 50, left: 30, scaleX: 0.5, scaleY: 0.5 } ); // Adding it to the canvas canvas.add(polygon); // Using the scaling event polygon.on("scaling", () => { polygon.set("stroke", "orange") canvas.renderAll(); }); </script> </body> </html>
Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara membuat objek poligon bertindak balas terhadap acara zum menggunakan FabricJS.
Atas ialah kandungan terperinci Bagaimana untuk membuat objek poligon bertindak balas terhadap acara zum menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!