Bagaimana untuk membuat objek poligon bertindak balas terhadap peristiwa tetikus menggunakan FabricJS?-tutorial js-php.cn

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

WBOY

Lepaskan： 2023-08-31 14:37:08

ke hadapan

727 orang telah melayarinya

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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!