Bagaimana untuk membuat kotak teks dengan warna latar belakang menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat kotak teks dengan warna latar belakang menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-06 11:57:02

ke hadapan

1559 orang telah melayarinya

如何使用 FabricJS 创建带有背景颜色的文本框？

Dalam tutorial ini, kami akan mencipta kotak teks dengan warna latar belakang menggunakan FabricJs. Kami boleh menyesuaikan, meregangkan atau mengalihkan teks yang ditulis dalam kotak teks. Kami juga boleh menyesuaikan teks itu sendiri menggunakan sifat seperti fontSize, fontFamily, fontStyle, fontWeight, dll. Untuk mencipta kotak teks, kita perlu mencipta contoh fabrik. Kelas kotak teks dan menambahnya pada kanvas. Sifat backgroundColor membolehkan kita menetapkan warna pada latar belakang objek dan bentuk kotak teks menjadi segi empat tepat.

Syntax

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

Salin selepas log masuk

Parameters

text - Parameter ini menerima String , iaitu rentetan teks yang ingin kami 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 berkaitan dengan kotak teks yang warna latar ialah sifatnya.

Kekunci Pilihan

Warna Latar Belakang - Hartanah ini menerima nilai String yang menentukan warna latar belakang.

Contoh 1

Melepasi sifat warna latar belakang sebagai kunci dengan nilai hex

Mari lihat contoh kod untuk menetapkan warna latar belakang pada objek kotak teks kami menggunakan nilai warna hex . Dalam contoh ini, kami menggunakan kod warna hex "#ffe4e1" yang merupakan warna merah yang sangat terang.

<!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 backgroundColor property as key with a hexadecimal value</h2>
   <p>You can see that the background colour is a very light shade of red.</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("Details matter, it&#39;s worth waiting to get it right.", {
         backgroundColor: "#ffe4e1",
         width: 400,
         top: 70,
         left: 110,
      });

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

Salin selepas log masuk

Contoh 2

Melepasi sifat warna latar belakang sebagai kunci dengan nilai rgba

Kita boleh menggunakan nilai RGBA dan bukannya kod warna hex, ini bermaksud - merah, hijau, biru dan alfa. Parameter alfa menentukan kelegapan warna. Dalam contoh ini kami menggunakan nilai rgba (0,206,209,0.4) iaitu warna biru biru gelap dengan kelegapan 0.4.

Atas ialah kandungan terperinci Bagaimana untuk membuat kotak teks dengan warna latar belakang menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!