Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan warna sempadan kawasan pilihan pada kanvas menggunakan FabricJS?
Bagaimana untuk menetapkan warna sempadan kawasan pilihan pada kanvas menggunakan FabricJS?
- WBOYke hadapan
- 2023-09-07 14:41:08735semak imbas
Dalam artikel ini, kita akan belajar cara menetapkan warna sempadan kawasan pilihan pada kanvas menggunakan FabricJS. Pilihan yang menunjukkan sama ada pemilihan kumpulan harus didayakan. FabricJS membolehkan kami melaraskan warna sempadan dengan sewajarnya menggunakan sifat SelectionBorderColor.
Syntax
new fabric.Canvas(element: HTMLElement|String, { selectionBorderColor: String }: Object)Parameter
-
Element - Parameter ini ialah 5ba626b379994d53f7acf72a64f9b697 elemen itu sendiri dan boleh diperolehi daripada dokumenId.Elemen itu sendiri dan boleh diperolehi daripada dokumenId.Elemen itu sendiri kanvas>
. Kanvas FabricJS akan dimulakan pada elemen ini. -
Pilihan (pilihan)
- Parameter ini ialah objek yang menyediakan penyesuaian tambahan bagi kanvas kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan kanvas seperti warna, kursor, lebar sempadan dan banyak sifat lain, antaranya selectionBorderColor ialah sifat yang boleh kami gunakan untuk menunjukkan warna sempadan pilihan. Nilai lalai bagi sifat SelectionBorderColor ialah rgba(255,255,255,0.3).
Gunakan nama warna untuk menetapkan warna kawasan pemilihan
selectionBorderColor hartanah menerima rentetan yang menentukan warna sempadan pilihan. Warna biasanya lebih gelap daripada pemilihan itu sendiri. Mari lihat contoh kod untuk melihat cara menetapkan warna sempadan kawasan pilihan dalam kanvas menggunakan FabricJS.<!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 border color of a selection area on a canvas</h2>
<p>Select an area around the object. You will notice that the border color of the selection would be red in color. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
selectionBorderColor: "green",
});
// Creating an instance of the fabric.Rect class
var rect = new fabric.Rect({
left: 170,
top: 90,
width: 60,
height: 80,
fill: "#006400",
angle: 90,
});
// Adding it to the canvas
canvas.add(rect);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Contoh 2Menggunakan nilai rgba sebagai warna kawasan pemilihan
Kita juga boleh menggunakan nilai "rgba" di mana "a" bermaksud "alpha" yang bermaksud kelegapan. Dalam contoh ini, kami menggunakan merah marun dengan nilai "rgba" (112,0,0) dan 0.9 untuk kelegapan. rreeee🎜Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna sempadan kawasan pilihan pada kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!