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.
new fabric.Triangle({ borderColor: String }: Object)#🎜Parameter#🎜#🎜#🎜#Pilihan Pilihan) < /em> - 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
borderColorborderColor# a # -🎜 properti ini diterima 🎜#String, yang menentukan warna jidar apabila memilih objek segi tiga. Nilai lalainya ialah rgb(178,204,255).
Gunakan nilai rentetan untuk melepasi kunci warna sempadan ##🎜🎜🎜🎜🎜🎜 Lihat contoh kod untuk mengetahui cara menetapkan nilai pada harta
borderColor. 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
yang komponennya menentukan jumlah merah, hijau, biru dan alfa, dengan alfa mewakili kelegapan. Dalam contoh ini kami menggunakanrgb(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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
