Rumah > Artikel > hujung hadapan web > Bagaimana untuk mendapatkan gaya yang dipilih dalam teks menggunakan FabricJS?

Bagaimana untuk mendapatkan gaya yang dipilih dalam teks menggunakan FabricJS?

WBOYke hadapan: 2023-08-24 11:33:10873semak imbas

如何使用 FabricJS 获取文本中当前选择的样式？

Dalam tutorial ini, kita akan belajar cara mendapatkan gaya teks yang sedang dipilih menggunakan FabricJS. Kita boleh memaparkan teks pada kanvas dengan menambahkan contoh Fabric.Text. Ia bukan sahaja membenarkan kami mengalih, menskala dan menukar dimensi teks, tetapi ia juga menyediakan ciri tambahan seperti penjajaran teks, hiasan teks, ketinggian baris, yang tersedia melalui ciri textAlign, garis bawah dan lineHeight masing-masing. Kami juga boleh mencari gaya yang dipilih pada masa ini menggunakan kaedah getSelectionStyles.

Tatabahasa

getSelectionStyles(startIndexopt, endIndexopt, completeopt)

Parameter

startIndexopt - Parameter ini menerima nombor, menunjukkan indeks permulaan untuk mendapatkan gaya.
endIndexopt - Parameter ini menerima Number, yang mewakili indeks akhir untuk mendapatkan gaya.
completeopt - Parameter ini menerima nilai Boolean, yang menentukan sama ada untuk mendapatkan gaya lengkap.

Contoh 1

Gunakan kaedah getSelectionStyles

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah getSelectionStyles. Dalam kes ini, gaya dari indeks ke-0 hingga indeks ke-4 akan dipaparkan.

<!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 getSelectionStyles method</h2>
   <p>You can open console from dev tools and see that the value is being displayed in the console</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 text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
      });

      // Add it to the canvas
      canvas.add(text);

      // Using getSelectionStyles method
      console.log("The style is", text.getSelectionStyles(0, 5, true));
   </script>
</body>
</html>

Contoh 2

Gunakan kaedah getSelectionStyles dan lulus nilai yang berbeza

Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah getSelectionStyles diberikan nilai yang berbeza. Dalam kes ini, output yang direkodkan akan mengandungi gaya aksara pada indeks ke-4 dan ke-5.

<!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 getSelectionStyles method and passing different values</h2>
   <p>You can open console from dev tools and see that the value is being displayed in the console</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 text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         styles: {
            0: {
               5: {
                  fontSize: 55,
                  fill: "blue",
                  fontStyle: "oblique",
               },
               4: {
                  fontSize: 45,
                  fill: "pink",
                  fontWeight: "bold",
               },
            },
         },
      });

      // Add it to the canvas
      canvas.add(text);

      // Using getSelectionStyles method
      console.log("The style is", text.getSelectionStyles(4, 6, true));
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan gaya yang dipilih dalam teks menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

number fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Gunakan JavaScript untuk meningkatkan laman web anda secara visual?Artikel seterusnya：Gunakan JavaScript untuk meningkatkan laman web anda secara visual?

Artikel berkaitan

Lihat lagi