Bagaimana untuk membalik kotak teks secara mendatar menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membalik kotak teks secara mendatar menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-16 13:17:02

ke hadapan

1238 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

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>

Salin selepas log masuk

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!