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

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

WBOY

Lepaskan： 2023-08-31 08:05:02

ke hadapan

888 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 acara berputar untuk menunjukkan cara membuat objek poligon bertindak balas terhadap putaran melalui kawalan.

Tatabahasa

polygon.on(“rotating”, callbackFunction);

Salin selepas log masuk

Contoh 1: Tunjukkan cara objek bertindak balas terhadap peristiwa putaran

Mari kita lihat contoh kod cara membuat objek poligon bertindak balas kepada peristiwa putaran. Dalam kes ini, apabila kita mengklik pada objek poligon dan memutarnya melalui kawalan putaran tengah, kita akan melihat output yang direkodkan. Ini kerana peristiwa putaran menyala secara berterusan semasa objek berputar.

<!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 rotating event</h2>
   <p>You can rotate the object to see the 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 rotating event
      polygon.on("rotating", () => {
         canvas.renderAll();
         console.log("The polygon object is rotating");
      });
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Tukar warna isian apabila putaran berlaku

Mari lihat contoh kod untuk melihat cara menukar warna isian apabila peristiwa putar berlaku. Kita boleh menggunakan kawalan putaran tengah (mtr) untuk memutarkan objek pada kanvas. Di sini, apabila kita memutar objek poligon menggunakan kawalan mtr, warna isian berubah kepada "hijau".

<!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 fill colour when rotate happens</h2>
   <p>
      You can see that the fill colour changes when the polygon is rotated
   </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,
            top: 50,
            left: 30, 
            scaleX: 0.5,
            scaleY: 0.5
         }
      );

      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the rotating event
      polygon.on("rotating", () => {
         polygon.set("fill", "green")
         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 putaran menggunakan FabricJS.

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