Bagaimana untuk menambah bayang ke segi tiga menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah bayang ke segi tiga menggunakan FabricJS?

王林

Lepaskan： 2023-09-04 09:21:13

ke hadapan

670 orang telah melayarinya

如何使用 FabricJS 向三角形添加阴影？

Dalam tutorial ini, kita akan belajar cara menambah bayang pada segitiga menggunakan FabricJS. Segitiga adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi tiga, kita mesti mencipta contoh kelas Fabric.Triangle dan menambahkannya pada kanvas.

Objek segi tiga kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, menambah warna latar belakang atau menambah bayang-bayang. Kita boleh menambah bayang pada segi tiga menggunakan sifat Shadow.

Syntax

new fabric.Triangle({ shadow : fabric.Shadow }: Object)

Salin selepas log masuk

Parameter

Options(pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang bayangnya adalah atribut.

Option Keys

Shadow - Hartanah ini menerima objek fabrik.Shadow yang membolehkan kita menambah bayang pada objek segitiga kita. . Mula-mula, kita perlu mencipta tika
fabric.Shadow

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 an orange shadow has been added to the triangle</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: "orange",
         blur: 20,
      });

      // Initiate a triangle object
      var triangle = new fabric.Triangle({
         left: 120,
         top: 70,
         width: 90,
         height: 80,
         fill: "#228b22",
         stroke: "#d8e4bc",
         strokeWidth: 7,
         shadow: shadow,
      });

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

Salin selepas log masuk

Contoh 2

Menyalurkan nilai RGBA ke objek bayang

Kita juga boleh melaraskan bayang-bayang dan memberikannya penampilan kabur dengan menyatakan nilai RGBA, mewakili merah, hijau, biru dan alfa. Alpha menentukan kelegapan warna. rreeee

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