Bagaimana untuk menambah strok pada segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah strok pada segi empat tepat menggunakan FabricJS?

王林

Lepaskan： 2023-09-06 12:01:07

ke hadapan

964 orang telah melayarinya

如何使用 FabricJS 向矩形添加描边？

Dalam tutorial ini, kita akan belajar cara menambah lejang pada segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita mesti mencipta contoh kelas Fabric.Rect dan menambahkannya pada kanvas.

Objek segi empat tepat kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, menambah warna latar belakang atau menukar warna garisan yang dilukis di sekeliling objek. Kita boleh melakukannya dengan menggunakan atribut Stroke.

Syntax

new fabric.Rect({ stroke : String }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang Stroke ialah atribut. Kekunci pilihan dipaparkan apabila menggunakan sifat
lines

<!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 stroke as key with a hexadecimal value</h2>
   <p>You can see the navy blue border around the rectangle</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 rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 70,
         width: 170,
         height: 70,
         fill: "#f4f0ec",
         stroke: "#000080",
         strokeWidth: 9,
      });

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

Salin selepas log masuk

Contoh 2

Melalukan nilai rgba kepada atribut
garisDalam contoh ini, kita akan melihat cara untuk menetapkan nilai "rgba" kepada atribut strok. Daripada kod warna heksadesimal, kita boleh menggunakan nilai
RGBA

(0,0,128,0.8)

, iaitu biru laut dengan kelegapan 0.8.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menambah strok pada segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!