Bagaimana untuk membuat perwakilan rentetan objek Line menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat perwakilan rentetan objek Line menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-28 17:21:08

ke hadapan

973 orang telah melayarinya

如何使用 FabricJS 创建 Line 对象的字符串表示形式？

Dalam tutorial ini, kita akan belajar cara mencipta perwakilan rentetan objek Line 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 garisan dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk mencipta perwakilan rentetan objek Garisan, kami menggunakan kaedah toString.

Tatabahasa

 toString(): String

Salin selepas log masuk

Menggunakan toString kaedah

#🎜🎜 #Contoh🎜🎜 #Contoh🎜🎜 #Contoh🎜 Contoh kod untuk melihat output dilog apabila menggunakan kaedah

toString

. Dalam kes ini, perwakilan rentetan bagi contoh baris dikembalikan.

<!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 toString method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the String representation of the line 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);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toString method
      console.log(
         "String representation of the Line instance is: ",
         line.toString()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah toString

untuk membandingkan dua elemen berbeza

Contoh

Mari lihat contoh kod untuk melihat cara membandingkan dua objek dengan melihat perwakilan rentetan masing-masing. Di sini kita mulakan contoh baris dan contoh segi empat tepat. Semasa kita menggunakan kaedah

toString

pada setiap objek, kita boleh melihat perwakilan rentetan masing-masing dalam 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>Using toString method to compare two different elements</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the String representation of the line instance and the rectangle 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);
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      // Initiate a Rectangle object
      var rect = new fabric.Rect( {
         stroke: "red",
         strokeWidth: 20,
         width:20,
         height: 50,
         left: 400,
         top: 55
      });
      // Add them to the canvas
      canvas.add(line);
      canvas.add(rect)
      // Using the toString method
      console.log(
         "String representation of the Line instance is: ", line.toString()
      );
      console.log(
         "String representation of the Rectangle instance is: ",
         rect.toString()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk membuat perwakilan rentetan objek Line menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!