Rumah > Artikel > hujung hadapan web > Bagaimana untuk membalik kotak teks secara mendatar menggunakan FabricJS?

Bagaimana untuk membalik kotak teks secara mendatar menggunakan FabricJS?

WBOYke hadapan: 2023-09-16 13:17:021273semak imbas

如何使用 FabricJS 水平翻转文本框？

Dalam tutorial ini, kita akan belajar cara membalikkan objek Kotak Teks secara mendatar menggunakan FabricJS. Kami boleh menyesuaikan, meregangkan atau mengalihkan teks yang ditulis dalam kotak teks. Untuk mencipta kotak teks, kita perlu mencipta contoh kelas Fabric.Textbox dan menambahkannya pada kanvas. Kita boleh membalikkan objek kotak teks secara mendatar menggunakan sifat FlipX.

Syntax

new fabric.Textbox(text: String, { flipX: Boolean }: Object)

Parameter

text - Parameter ini menerima rentetan, iaitu rentetan teks yang ingin kami paparkan dalam kotak teks kami.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kotak teks kami. Menggunakan parameter ini anda boleh menukar sifat berkaitan objek seperti warna, kursor, lebar lejang dan banyak sifat lain, flipX ialah sifat objek ini.

Kunci pilihan

flipX - Sifat ini menerima nilai boolean yang membolehkan kita membalikkan objek secara mendatar.

Contoh 1

Melalukan FlipX sebagai kunci dengan nilai "palsu"

Mari kita lihat contoh kod yang menunjukkan kepada kita orientasi lalai objek kotak teks dalam FabricJS. Memandangkan kami memberikan nilai False kepada sifat flipX, teks tidak akan terbalik secara mendatar.

<!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 flipX as key with a "false" value</h2>
   <p>You can see that the text has not flipped horizontally</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 textbox object
      var textbox = new fabric.Textbox("Each day provides its own gifts.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipX: false,
      });

      // Create gradient fill
      textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 100, y2: 0 },
               colorStops: [
                  { offset: 0, color: "#545a2c" },
                  { offset: 1, color: "#6495ed" },
               ],
            })
         );
      // Add it to the canvas
      canvas.add(textbox);
   </script>
</body>
</html>

Contoh 2

Meluluskan sifat FlipX sebagai kunci dengan nilai "benar"

Dalam contoh ini, kita mempunyai objek kotak teks dengan lebar 200px dengan isian kecerunan linear mendatar. Apabila kita menggunakan sifat flipX pada objek kotak teks, teks terbalik secara mendatar, jadi kita melihat kecerunan dan teks terbalik juga.

Atas ialah kandungan terperinci Bagaimana untuk membalik kotak teks secara mendatar menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

字符串对象 ul fabric

Kenyataan：

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

Artikel sebelumnya：FabricJS - Bagaimana untuk membuang bayang objek semasa dalam imej klon?Artikel seterusnya：FabricJS - Bagaimana untuk membuang bayang objek semasa dalam imej klon?

Artikel berkaitan

Lihat lagi