Bagaimana untuk membuat objek poligon bertindak balas terhadap peristiwa yang dipilih dan dinyahpilih menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat objek poligon bertindak balas terhadap peristiwa yang dipilih dan dinyahpilih menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-21 09:41:11

ke hadapan

1371 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 dipilih dan nyahpilih untuk menunjukkan cara membuat objek poligon bertindak balas kepada pengguna yang memilih dan menyahpilih objek.

Tatabahasa

polygon.on("selected", callbackFunction);
polygon.on("deselected", callbackFunction);

Salin selepas log masuk

Contoh 1: Tunjukkan cara objek bertindak balas terhadap peristiwa yang dipilih

Mari kita lihat contoh kod cara membuat objek poligon bertindak balas terhadap peristiwa dipilih. Mengklik pada objek akan mencetuskan peristiwa dipilih yang melaksanakan fungsi panggil balik. Dalam kes ini, apabila kita mengklik pada objek poligon, warna isiannya berubah dan output yang direkodkan dipaparkan.

<!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 selected event</h2>
   <p>Select the object to see the event callback function fired</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: "black",
            stroke: "blue",
            strokeWidth: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the selected event
      polygon.on("selected", () => {
         polygon.fill = "blue";
         canvas.renderAll();
         console.log("The polygon object is selected");
      });
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Tunjukkan cara objek bertindak balas terhadap peristiwa nyahpilihan

Mari kita lihat contoh kod untuk memahami cara membuat objek Poligon bertindak balas terhadap peristiwa Nyahpilih. Di sini, sebaik sahaja objek poligon dinyahpilih, acara itu dicetuskan, sekali gus menukar warna isian juga.

<!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 deselected event</h2>
   <p>Deselect the object to see the event callback function fired</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: 2,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas 
      canvas.add(polygon);
      
      // Using the deselected event
      polygon.on("deselected", () => {
         polygon.fill = "black";
         canvas.renderAll();
         console.log("The polygon object is deselected");
      });
   </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 yang dipilih dan dinyahpilih menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk membuat objek poligon bertindak balas terhadap peristiwa yang dipilih dan dinyahpilih menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!