Bagaimana untuk membalikkan kotak teks secara menegak menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membalikkan kotak teks secara menegak menggunakan FabricJS?

王林

Lepaskan： 2023-08-26 20:41:09

ke hadapan

797 orang telah melayarinya

如何使用 FabricJS 垂直翻转文本框？

Dalam tutorial ini, kita akan belajar cara membalikkan objek Kotak Teks secara menegak 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 menyelak objek kotak teks secara menegak menggunakan sifat flipY.

Syntax

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

Salin selepas log masuk

Parameters

text - Parameter ini menerima String iaitu rentetan teks yang kita mahu gunakan. Ingin dipaparkan dalam kotak teks kami.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kotak teks kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak lagi sifat lain yang dikaitkan dengan objek yang flipY ialah sifatnya.

Option Key

flipY - Sifat ini menerima nilai Boolean yang membolehkan kita membalikkan objek secara menegak. < /p>

Contoh 1

Melalukan FlipY 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 "palsu" kepada sifat flipY, teks tidak akan terbalik secara menegak.

<!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 flipY as key with a "false" value</h2>
   <p>You can see that the text has not flipped vertically</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("Fall seven times, stand up eight.", {
         backgroundColor: "#e3dac9",
         width: 400,
         left: 70,
         top: 70,
         flipY: false,
      });

      // Create gradient fill
         textbox.set(
         "fill",
         new fabric.Gradient({
            type: "linear",
            coords: { x1: 0, y1: 0, x2: 0, y2: 100 },
            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 FlipY sebagai kunci dengan nilai "true"

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

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