Bagaimana untuk menetapkan asal menegak transformasi teks menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan asal menegak transformasi teks menggunakan FabricJS?

王林

Lepaskan： 2023-08-24 19:49:08

ke hadapan

1450 orang telah melayarinya

Bagaimana untuk menetapkan asal menegak transformasi teks menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara menetapkan asal menegak transformasi 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 atribut originY untuk menetapkan asal menegak transformasi.

Tatabahasa

new fabric.Text(text: String , { originY : String }: Object)

Salin selepas log masuk

Parameter

teks - Parameter ini menerima String, iaitu rentetan teks yang ingin kami paparkan.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada teks kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar sempadan dan banyak sifat lain yang dikaitkan dengan objek yang asalnyaY ialah atribut.

Kunci pilihan

originY - Hartanah ini menerima nilai String yang membolehkan kita menetapkan asal menegak transformasi. Nilai yang mungkin adalah "Atas", "Bawah" dan "Pusat". Nilai lalainya ialah "atas".

Contoh 1

Kemunculan lalai objek teks

Mari kita lihat contoh kod untuk melihat rupa objek teks tanpa menggunakan atribut originY. Dalam kes ini, asal menegak transformasi akan menjadi bahagian atas, yang juga merupakan lalai.

<!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>Default appearance of the Text object</h2>
   <p>You can see that the vertical origin of transformation is towards top</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",
      });

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

Salin selepas log masuk

Contoh 2

Lewati atribut asalY sebagai kunci kepada nilai

Dalam contoh ini kita akan melihat cara memberikan nilai kepada sifat asalY mengubah asal menegak transformasi. Kami menggunakan dua objek teks dalam contoh ini untuk menunjukkan perbezaan. Dalam objek teks pertama kami, kerana kami melepasi nilai sebagai "bawah", asal menegak transformasi kini berada di bahagian bawah. Atribut teratas yang sama iaitu 100 digunakan pada kedua-dua teks, tetapi memandangkan asal menegak perubahan berubah, ia masih berada dalam kedudukan menegak yang berbeza.

<!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 originY property as key with a value</h2>
   <p>You can see that origin of transformation for the first text object(text1) is bottom while text2 maintains the default vertical origin of transformation</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 text1 = new fabric.Text("Text 1", {
         width: 300,
         left: 200,
         top: 100,
         fill: "green",
         originY: "bottom",
      });

      // Initiate a text object
      var text2 = new fabric.Text("Text 2", {
         width: 300,
         left: 50,
         top: 100,
         fill: "red",
      });

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menetapkan asal menegak transformasi teks menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!