Bagaimana untuk mengembalikan perwakilan objek tanpa data poligon menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mengembalikan perwakilan objek tanpa data poligon menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-25 18:54:46

ke hadapan

829 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. Kita boleh menggunakan kaedah toDatalessObject untuk mengembalikan perwakilan objek tanpa data poligon. Kaedah ini mengembalikan perwakilan objek bagi contoh poligon.

Tatabahasa

toDatalessObject( propertiesToInclude: Array ): Object

Salin selepas log masuk

Parameter

propertiesToInclude (pilihan) - Parameter ini menerima Array yang membolehkan kami menambah sebarang sifat yang ingin kami sertakan dalam output. Parameter ini adalah pilihan.

Contoh 1: Menggunakan kaedah toDatalessObject

Mari kita lihat contoh kod tentang cara melihat perwakilan objek tanpa data bagi objek Poligon dalam konsol menggunakan kaedah toDatalessObject.

<!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>Using toDatalessObject method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the dataless object representation of the polygon instance
   </p>
   <canvas id="canvas"></canvas> 
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 50,
            left: 50,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the toDatalessObject method
      console.log(
         "Dataless object representation of a Polygon instance is: ",
         polygon.toDatalessObject()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2: Tambahkan sifat tambahan menggunakan kaedah toDatalessObject

Mari lihat contoh kod untuk melihat cara memasukkan sifat tambahan menggunakan kaedah toDatalessObject. Dalam contoh ini, kami menambahkan sifat tersuai yang dipanggil "nama". Kita boleh menghantar sifat khusus kepada contoh fabric.Polygon sebagai parameter kedua dalam objek pilihan dan menghantar kekunci yang sama kepada kaedah toDatalessObject.

<!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>Using toDatalessObject method to add additional properties</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the property called name
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object with name key 
      // passed in options object
      var polygon = new fabric.Polygon(
         [
            { x: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 50,
            left: 50,
            name: "Polygon instance",
         } 
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using the toDatalessObject method
      console.log(
         "Dataless object representation of a Polygon instance is: ",
         polygon.toDatalessObject(["name"])
      );
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara mengembalikan perwakilan objek tanpa data poligon menggunakan FabricJS.

Atas ialah kandungan terperinci Bagaimana untuk mengembalikan perwakilan objek tanpa data poligon menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!