Rumah > Artikel > hujung hadapan web > Bagaimana untuk memindahkan garis dasar satu aksara dalam teks menggunakan FabricJS?

Bagaimana untuk memindahkan garis dasar satu aksara dalam teks menggunakan FabricJS?

PHPzke hadapan: 2023-09-01 17:05:031313semak imbas

如何使用 FabricJS 移动文本中单个字符的基线？

Dalam tutorial ini, kita akan belajar cara mengalihkan garis dasar satu aksara dalam teks 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. Begitu juga, kita juga boleh menggunakan sifat deltaY untuk mengalihkan garis dasar satu aksara.

Tatabahasa

new fabric.Text(text: String , { styles: { deltaY: Number}:Object }: Object)

Parameter

teks - Parameter ini menerima Rentetan, iaitu rentetan teks yang ingin kami paparkan.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada teks kami. Gunakan parameter ini untuk menukar warna, kursor, lebar jidar dan banyak sifat lain yang dikaitkan dengan objek yang gayanya ialah sifat.

Kunci pilihan

styles - Harta ini menerima nilai Objek yang membolehkan kami menambah gaya pada watak individu.
deltaY - Hartanah ini menerima nilai Nombor yang membolehkan kami mengalihkan garis dasar gaya sahaja.

Contoh 1

Hanya hantar atribut gaya sebagai kunci

Dalam contoh ini kita boleh melihat cara menambah gaya individu pada aksara menggunakan atribut gaya. Seperti yang dapat kita lihat dalam contoh ini, hanya aksara ke-0 mempunyai Saiz fon 55, Berat fon tebal dan Gaya fon "serong". Atribut peringkat pertama ialah nombor baris, dan atribut peringkat kedua ialah simbol aksara. Di sini kita menggunakan 0 untuk mewakili baris pertama dan aksara pertama.

<!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>Passing the styles property as key</h2>
   <p>You can see that the first character looks different now</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 sample text here.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
         styles: {
            0: {
               0: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fontStyle: "oblique",
               }
            }
         }
      });

      // Add it to the canvas
      canvas.add(text);
   </script>
</body>
</html>

Contoh 2

Lepaskan atribut gaya sebagai kunci bersama-sama dengan atribut deltaY

Dalam contoh ini, kita akan melihat cara menambah garis dasar yang berbeza pada aksara menggunakan sifat deltaY. Dalam kes ini, nombor kedua dalam baris pertama (indeks pertama) mempunyai garis dasar yang berbeza daripada aksara bersebelahan kerana deltaY ditentukan.

<!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>Passing the styles property as key along with deltaY property</h2>
   <p> You can see that the second number in the first line has a different baseline </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 sample text here. H2O", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
         styles: {
            1: {
               0: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fill: "red",
               },
               1: {
                  deltaY: 15,
                  fill: "blue",
               },
               2: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fill: "red",
               },
            },
         },
      });

      // Add it to the canvas
      canvas.add(text);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk memindahkan garis dasar satu aksara dalam teks menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

String Object 字符串 number 对象 fabric

Kenyataan：

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

Artikel sebelumnya：Bermula dengan perpustakaan animasi Mojs: Komponen HTMLArtikel seterusnya：Bermula dengan perpustakaan animasi Mojs: Komponen HTML

Artikel berkaitan

Lihat lagi