Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat segitiga dengan warna sempadan menggunakan FabricJS?

Bagaimana untuk membuat segitiga dengan warna sempadan menggunakan FabricJS?

WBOYke hadapan: 2023-09-12 12:29:021336semak imbas

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

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

Memandangkan FabricJS sangat fleksibel, kami boleh menyesuaikan objek segi tiga 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.Triangle({ borderColor: String }: Object)

Parameter

#🎜Parameter#🎜#🎜#🎜#Pilihan Pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang mana
borderColor

borderColor# a # -🎜 properti ini diterima 🎜#String, yang menentukan warna jidar apabila memilih objek segi tiga. Nilai lalainya ialah rgb(178,204,255).

Contoh 1

Gunakan nilai rentetan untuk melepasi kunci warna sempadan ##🎜🎜🎜🎜🎜🎜 Lihat contoh kod untuk mengetahui cara menetapkan nilai pada harta

. Kami telah memberikan nilai "biru" kepada kekunci borderColor, yang membantu mencipta sempadan biru apabila objek segi tiga dipilih.

<!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 triangle 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "blue",
      });

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

borderColor kunci kunci #🎜🎜 #🎜🎜🎜🎜🎜🎜 # Daripada menghantar nama warna ringkas sebagai rentetan, kami juga boleh menggunakan nilai RGBA

rgb(128,0,128) iaitu nilai rgb ungu.

<!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 borderColor key</h2>
   <p>Select the triangle 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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 60,
         width: 100,
         height: 70,
         fill: "#deb887",
         borderColor: "rgb(128,0,128)",
      });

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

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

String 字符串值传递对象 ul fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menyelaraskan imej pada kad dengan tajuk dinamik dalam Javascript?Artikel seterusnya：Bagaimana untuk menyelaraskan imej pada kad dengan tajuk dinamik dalam Javascript?

Artikel berkaitan

Lihat lagi