Bagaimana untuk mendapatkan perwakilan SVG baris menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mendapatkan perwakilan SVG baris menggunakan FabricJS?

王林

Lepaskan： 2023-08-31 17:57:11

ke hadapan

1205 orang telah melayarinya

如何使用 FabricJS 获取线条的 SVG 表示？

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

Syntax

 _toSVG(): Array

Salin selepas log masuk

Tidak menggunakan _toSVGmethod

Contoh

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah _toSVG tidak digunakan. Kaedah _toSVG mengembalikan tatasusunan rentetan yang mengandungi perwakilan svg khusus bagi tika itu. Walau bagaimanapun, kerana kami tidak menggunakan kaedah _toSVG, kami tidak akan dapat melihat tatasusunan rentetan dalam konsol. Nilai lalai untuk objek Line didokumenkan untuk menggambarkan perkara ini.

<!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>Without using _toSVG 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);
      
      // Console logging the Line object
      console.log("The Line object is as follows: ", line);
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah _toSVG

Contoh

Dalam contoh ini, kami menggunakan kaedah _toSVG untuk mendapatkan tatasusunan rentetan yang mengandungi perwakilan svg objek.

<!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 _toSVG method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains an array of strings containing the svg representation of the Line object
   </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 _toSVG method
      console.log(
         "The svg representation of the Line object is as follows: ",
         line._toSVG()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan perwakilan SVG baris menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!