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

Bagaimana untuk membuat objek poligon bertindak balas untuk mengubah saiz peristiwa menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-24 12:53:02

ke hadapan

1442 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 object:modified untuk membuat objek poligon bertindak balas terhadap saiz semula.

Tatabahasa

object:modified

Salin selepas log masuk

Contoh 1: Rupa lalai bagi objek poligon

Mari kita lihat contoh kod untuk melihat cara objek poligon dipaparkan apabila objek: peristiwa yang diubah suai tidak digunakan. Dalam kes ini, objek poligon akan ditambahkan pada kanvas.

<!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>Default appearance of the polygon object</h2>
   <p>You can see that the polygon object has been added to the canvas</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,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Tunjukkan cara objek bertindak balas terhadap saiz semula

Mari kita lihat contoh kod untuk melihat output dilog apabila objek poligon diubah saiznya. Kami menggunakan peristiwa object:modified, yang menyala pada penghujung sebarang transformasi objek atau sebarang perubahan yang berkaitan dengan objek. Dalam kes ini, setiap kali kita menukar skala objek, ketinggian dan lebar berskala akan dilog masuk ke konsol.

<!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 being resized</h2>
   <p>
      You can scale object using corner and open console from dev tools to see that the scaled width and height value of the polygon object is being logged
   </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,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using object:modified event
      canvas.on("object:modified", (e) => {
         canvas.getActiveObjects().forEach((o) => { 
            console.log(
               "Scaled Height of the polygon is: ",
               o.getScaledHeight(),
               "Scaled Width of the polygon is:",
               o.getScaledWidth()
            );
         });
      });
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara membuat objek poligon bertindak balas untuk mengubah saiz peristiwa menggunakan FabricJS.

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