cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk membuat kotak teks dengan warna latar belakang menggunakan FabricJS?

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

WBOY
WBOYke hadapan
2023-09-06 11:57:021561semak imbas

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

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>

    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.

    rreeee

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!

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menjadi pembangun JavaScript?Artikel seterusnya：Bagaimana untuk menjadi pembangun JavaScript?

Artikel berkaitan

Lihat lagi