Bagaimana untuk membuat segi empat tepat dengan warna sempadan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat segi empat tepat dengan warna sempadan menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-09 20:53:08

ke hadapan

1313 orang telah melayarinya

如何使用 FabricJS 创建带有边框颜色的矩形？

Dalam tutorial ini, kami akan mencipta segi empat tepat dengan warna sempadan 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.

Memandangkan FabricJS sangat fleksibel, kami boleh menyesuaikan objek segi empat tepat kami dalam apa jua cara yang kami suka. Salah satu sifat yang disediakan oleh FabricJS ialah borderColor, yang membolehkan kita memanipulasi warna sempadan apabila objek itu aktif.

Syntax

new fabric.Rect({ borderColor: 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 sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang borderColor ialah atribut.

Kunci pilihan

borderColor - Sifat ini menerima rentetan yang menyatakan warna jidar apabila memilih objek segi empat tepat. Nilai lalainya ialah rgb(178,204,255).

Contoh 1

Melalui kunci warna sempadan menggunakan nilai rentetan

Mari kita lihat contoh kod untuk memahami cara menetapkan nilai pada sifat borderColor. Kami telah memberikan nilai "biru" kepada kekunci borderColor, yang membantu mencipta sempadan biru apabila memilih objek segi empat tepat.

<!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 borderColour key with a String value</h2>
   <p>Select the rectangle to see the border colour</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "blue",
         padding: 9,
      });

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

Salin selepas log masuk

Contoh 2

Melalukan nilai RGBA ke kekunci borderColor

Daripada menghantar nama warna ringkas sebagai rentetan, kita juga boleh menggunakan nilai RGBA yang komponennya menentukan Jumlah Merah, Hijau, Biru dan Alpha daripada , dengan alfa mewakili kelegapan. Dalam contoh ini kami menggunakan rgb(128,0,128) iaitu nilai rgb untuk ungu.

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