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

Bagaimana untuk membuat objek poligon bertindak balas terhadap acara zum menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-29 11:57:06

ke hadapan

912 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 scaling untuk menunjukkan cara objek poligon bertindak balas terhadap penskalaan.

tatabahasa

polygon.on(“scaling”, callbackFunction);

Salin selepas log masuk

Contoh 1: Tunjukkan cara objek bertindak balas terhadap acara zum

Mari lihat contoh kod untuk melihat cara objek poligon bertindak balas apabila peristiwa zum berlaku. Kita boleh skala objek dengan menyeret mana-mana kawalan sudut. Di sini, apabila objek berskala, peristiwa skala akan dicetuskan 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 scaling event</h2>
   <p>
      You can scale the polygon object and open the console from dev tools 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: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 3,
            objectCaching: false,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the scaling event
      polygon.on("scaling", () => {
         canvas.renderAll();
         console.log("The object is being scaled");
      });
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Tukar warna lejang apabila mengezum

Mari lihat contoh kod untuk melihat cara menukar warna lejang apabila peristiwa zoom berlaku. Kami menggunakan kaedah yang ditetapkan untuk menetapkan warna lejang poligon kepada "oren". Jadi apabila kita skala objek, warna stroknya akan berubah menjadi oren.

<!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 stroke colour when scaling happens</h2>
   <p>
      You can see that the stroke colour changes when the polygon is scaled
   </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: 5,
            objectCaching: false,
            top: 50,
            left: 30,
            scaleX: 0.5,
            scaleY: 0.5
         }
      );

      // Adding it to the canvas
      canvas.add(polygon);

      // Using the scaling event
      polygon.on("scaling", () => {
         polygon.set("stroke", "orange")
         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 acara zum menggunakan FabricJS.

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