Bagaimana untuk menambah bayangan ke kotak teks menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah bayangan ke kotak teks menggunakan FabricJS?

王林

Lepaskan： 2023-09-12 18:33:02

ke hadapan

1602 orang telah melayarinya

如何使用 FabricJS 向文本框添加阴影？

Dalam tutorial ini, kita akan belajar cara menambah bayang 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. Objek kotak teks kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, menambah warna latar belakang atau menambah bayang-bayang padanya. Kita boleh menambah bayang pada kotak teks menggunakan atribut shadow.

Sintaks

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

Salin selepas log masuk

Parameter

#🎜#🎜🎜🎜#🎜#🎜 -#teks ini terima String, iaitu teks yang kami gunakanstringyang ingin kami paparkan dalam kotak teks kami.
- Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada definisi kotak teks kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang bayangnya merupakan atribut.

bayang
- Hartanah ini menerima #🎜#bric Objek yang membolehkan kita menambah bayang pada objek Kotak Teks. Contohnya, untuk menambah bayang pada objek Kotak Teks, kita perlu mencipta tika Fabric.Shadow baharu dan kemudian menetapkan tika itu kepada sifat Shadow.
Contoh 1

Lulus objek bayang-bayang ke

bayang#🎜 #🎜🎜 atribut 🎜🎜#

Mari lihat contoh kod untuk melihat cara menetapkan nilai pada sifat bayang-bayang untuk menambah bayangan pada objek kotak teks kita. Mula-mula, kita perlu mencipta tika baharu fabric.Shadow dan kemudian tetapkan tika itu kepada harta bayang kita.

<!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 the shadow object to the shadow property</h2>
   <p>You can see that a blue shadow has been added to the textbox</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "blue",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

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

Salin selepas log masuk

Contoh 2 Lulus nilai RGBA kepada objek bayang

#🎜🎜🎜#Kita juga boleh melaraskannya#Kami juga boleh melaraskannya Bayang-bayang dan memberi mereka penampilan kabur nilai RGBA, mewakili merah, hijau, biru dan alfa. Alpha menentukan kelegapan warna.

<!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 an RGBA value to the shadow object</h2>
   <p>You can see the shadow created using RGBA colour value</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "rgba(0,0,205, 0.7)",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

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

Salin selepas log masuk

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