Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat objek poligon bertindak balas terhadap peristiwa tetikus 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 peristiwa mouseup dan mousedown untuk menunjukkan cara objek poligon bertindak balas terhadap peristiwa tetikus yang dicetuskan pengguna.
polygon.on(“mouseup”, callbackFunction); polygon.on(“mousedown”, callbackFunction);
Mari kita lihat contoh kod untuk melihat cara objek poligon bertindak balas apabila peristiwa mouseup dicetuskan. Acara mouseup berlaku apabila pengguna melepaskan butang kiri tetikus. Di sini, sebaik sahaja acara mouseup dicetuskan, lebar lejang akan menjadi 33.
<!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 mouseup event</h2> <p> You can select the object and release the left mouse button to see that the stroke width has changed </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: 2, objectCaching: false, } ); // Adding it to the canvas canvas.add(polygon); // Using the mouseup event polygon.on("mouseup", () => { polygon.set("strokeWidth", 33); canvas.renderAll(); }); </script> </body> </html>
Mari kita lihat contoh kod untuk melihat cara objek poligon bertindak balas apabila peristiwa mousedown dicetuskan. Apabila pengguna menekan butang, peristiwa turun tetikus berlaku. Di sini kita dapat melihat bahawa objek bertindak balas kepada acara turun tetikus dengan menukar lebar lejangnya daripada 33 kepada 2.
<!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 mousedown event</h2> <p> You can press the left mouse button to trigger the mousedown event to see that the stroke width has changed </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: 33, objectCaching: false, } ); // Adding it to the canvas canvas.add(polygon); // Using the mousedown event polygon.on("mousedown", () => { polygon.set("strokeWidth", 2); canvas.renderAll(); }); </script> </body> </html>
Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara membuat objek poligon bertindak balas terhadap peristiwa tetikus menggunakan FabricJS.
Atas ialah kandungan terperinci Bagaimana untuk membuat objek poligon bertindak balas terhadap peristiwa tetikus menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!