Bagaimana untuk mencari kerumitan contoh Line menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mencari kerumitan contoh Line menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-31 17:45:07

ke hadapan

563 orang telah melayarinya

如何使用 FabricJS 查找 Line 实例的复杂度？

Dalam tutorial ini, kita akan belajar cara mencari kerumitan garisan menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garis dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk mendapatkan kerumitan objek Line, kami menggunakan kaedah kerumitan. Jika objek semasa mewarisi terus daripada kelas asas dan bukannya subkelas, kaedah ini akan mengembalikan 1.

Tatabahasa

 complexity(): Number

Salin selepas log masuk

Menggunakan kaedah kerumitan

Contoh

#🎜🎜🎜#Let’s untuk melihat contoh kod Output dilog apabila kaedah kerumitan diperolehi untuk contoh Line. Kerumitan ialah 1 melainkan subkategori.

<!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 the complexity method</h2>
   <p>You can open console from dev tools and 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 Line object
      var line = new fabric.Line([70, 100, 150, 200], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the complexity method
      console.log("The complexity of Line instance is: ", line.complexity());
   </script>
</body>
</html>

Salin selepas log masuk

Menggunakan kaedah kerumitan untuk membandingkan objek berbeza

Contoh

Dalam contoh ini, kami menggunakan kaedah kerumitan untuk membandingkan kerumitan tika garis dan tika poligon. Anda boleh membuka konsol daripada alat pembangunan untuk melihat perbezaan kerumitan.

<!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 the complexity method to compare different objects</h2>
   <p>You can open console from dev tools and see that the complexities are different
   </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 Line object
      var line = new fabric.Line([70, 100, 150, 200], {
         stroke: "blue",
      });
      
      // Initiate a Polygon object
      var polygon = new fabric.Polyline(
         [
            { x: 50, y: 30 },
            { x: 105, y: 10 },
            { x: 160, y: 30 },
            { x: 100, y: 150 },
         ],
            {
               fill: "red",
               left: 300,
               top: 70,
            }
      );
      
      // Add both to the canvas
      canvas.add(line);
      canvas.add(polygon);
      
      // Using the complexity method
      console.log("The complexity of Line instance is: ", line.complexity());
      console.log(
         "The complexity of Polygon instance is: ",
         polygon.complexity()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mencari kerumitan contoh Line menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!