Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat objek poligon bertindak balas terhadap peristiwa tetikus menggunakan FabricJS?

Bagaimana untuk membuat objek poligon bertindak balas terhadap peristiwa tetikus menggunakan FabricJS?

WBOYke hadapan: 2023-08-31 14:37:08708semak imbas

如何使用 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.

Tatabahasa

polygon.on(“mouseup”, callbackFunction);
polygon.on(“mousedown”, callbackFunction);

Contoh 1: Tunjukkan cara objek bertindak balas kepada peristiwa naik tetikus

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>

Contoh 2: Tunjukkan cara objek bertindak balas kepada peristiwa turun tetikus

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>

Kesimpulan

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!

对象事件鼠标事件 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menukar nilai Hex kepada nilai RGBA menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menukar nilai Hex kepada nilai RGBA menggunakan JavaScript?

Artikel berkaitan

Lihat lagi