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

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

WBOY

Lepaskan： 2023-09-16 09:17:14

ke hadapan

1038 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 skewing untuk menunjukkan cara objek poligon bertindak balas kepada pengguna apabila dimanipulasi. Dengan mengawal kecondongan.

tatabahasa

polygon.on("skewing", callbackFunction);

Salin selepas log masuk

Contoh 1: Tunjukkan cara objek bertindak balas kepada peristiwa senget

Mari lihat contoh kod untuk melihat cara objek poligon bertindak balas apabila menggunakan acara condongkan . Anda boleh mencondongkan objek secara mendatar dan menegak dengan menekan kekunci shift dan kemudian menyeret kawalan tengah secara mendatar atau menegak. Apabila objek dicondongkan, peristiwa kecondongan menyala secara berterusan.

<!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 skewing event</h2>
   <p>
      You can keep skewing the object while the console from dev tools is open to see the logged output
   </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 skewing event
      polygon.on("skewing", () => {
         canvas.renderAll();
         console.log("The polygon object is being skewed");
      });
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Tukar warna isian apabila kecondongan berlaku

Mari lihat contoh kod untuk melihat cara menukar warna isian apabila peristiwa condongkan berlaku. Kami menggunakan kaedah set, iaitu setter yang membolehkan kami menentukan sifat yang ingin kami ubah. Di sini, setiap kali kita condongkan poligon, 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 skew happens</h2>
   <p>
      You can see that the fill colour changes when the polygon is skewed
   </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 skewing event
      polygon.on("skewing", () => {
         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 senget menggunakan FabricJS.

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