Bagaimana untuk melumpuhkan penskalaan berpusat Kotak Teks menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan penskalaan berpusat Kotak Teks menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-23 18:01:02

ke hadapan

1263 orang telah melayarinya

如何使用 FabricJS 禁用 Textbox 的居中缩放？

Dalam tutorial ini, kita akan belajar cara melumpuhkan penskalaan berpusat pada Kotak Teks 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. Apabila menskalakan dengan kawalan, tetapkan nilai sebenar pada sifat centeredScaling, menggunakan pusat sebagai asal transformasi objek.

Syntax

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

Salin selepas log masuk

Parameter

teks − 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 warna, kursor, lebar lejang dan sifat lain objek yang berkaitan dengan atribut centeredScaling.

Options Keys

centeredScaling - Sifat ini menerima nilai Boolean dan membolehkan kita mengawal sama ada objek harus menggunakan pusatnya sebagai asal transformasi. . Apabila kita mengezum masuk pada objek, asal transformasi adalah pusat kotak teks.

<!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 centeredScaling as key and assigning a "true" value to it</h2>
   <p>Try scaling the textbox to see that centered scaling has been enabled</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("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: true,
      });

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

Salin selepas log masuk

Kami boleh melumpuhkan atribut centeredScaling dengan memberikan nilai "false" kepadanya. Ini tidak lagi akan menggunakan bahagian tengah kotak teks sebagai pusat transformasi. Berikut ialah contoh kod untuk ditunjukkan -

<!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>Disabling centeredScaling property</h2>
   <p>Try scaling the textbox to see that centered scaling has been disabled</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("Success is the child of audacity.", {
         backgroundColor: "#ffe5b4",
         width: 400,
         top: 70,
         left: 110,
         centeredScaling: false,
      });

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan penskalaan berpusat Kotak Teks menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!