Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan warna sudut kawalan bulatan menggunakan FabricJS?
Bagaimana untuk menetapkan warna sudut kawalan bulatan menggunakan FabricJS?
- WBOYke hadapan
- 2023-08-23 10:13:14957semak imbas
Dalam tutorial ini, kami akan menggunakan FabricJS untuk menetapkan warna sudut kawalan Bulatan. Sifat cornerColor membolehkan kita memanipulasi warna sudut kawalan apabila objek aktif.
Syntax
new fabric.Circle({ cornerColor: String }: Object)Parameter
pilihan (pilihan) - Parameter ini ialah objek yang menyediakan pilihan untuk penyesuaian tambahan bulatan. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak lagi sifat objek yang berkaitan dengan sifat cornerColor.
Option Key
cornerColor - Harta ini menerima rentetan yang membolehkan kita menetapkan warna pada sudut kawalan objek yang dipilih.
Contoh 1
Melepasi sudutWarna sebagai kunci dan menggunakan nama warna sebagai nilai
Mari dapatkan contoh menukar warna dengan menggunakan atribut cornerColor. Dalam kes ini, kami memberikan nilai "hitam" kepada kekunci, menjadikan sudut kawalan kelihatan hitam.
<!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>Setting the colour of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "black"
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Contoh 2
Menetapkan nilai RGBA kepada sifat cornerColor
Kita boleh menetapkan nilai RGBA kepada nilai string kunci dan bukannya hanya menghantar nama warna yang ringkas. RGBA bermaksud merah, hijau, biru dan ketelusan (alfa). Mari lihat contoh bagaimana untuk mencapai ini −
<!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>Setting the colour of controlling corners of circle using FabricJS</h2>
<p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgba" value to set the corners purple. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#daa520",
cornerColor: "rgb(255,20,147)"
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna sudut kawalan bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!