Bagaimana untuk menetapkan warna sempadan kawasan pilihan pada kanvas menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan warna sempadan kawasan pilihan pada kanvas menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-07 14:41:08

ke hadapan

811 orang telah melayarinya

如何使用 FabricJS 设置画布上选择区域的边框颜色？

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)

Salin selepas log masuk

Parameter

Element - Parameter ini ialah 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).

Contoh 1

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>

Salin selepas log masuk

Contoh 2

Menggunakan 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!