Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan warna kawasan pilihan pada kanvas menggunakan FabricJS?

Bagaimana untuk menetapkan warna kawasan pilihan pada kanvas menggunakan FabricJS?

王林ke hadapan: 2023-09-10 21:53:091395semak imbas

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

Dalam artikel ini, kita akan belajar cara menetapkan warna kawasan pilihan pada kanvas menggunakan FabricJS. Kita boleh melaraskan warna menggunakan sifat selectionColor.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionColor: String }: Object)

Parameter

Element - Parameter ini ialah elemen
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, dengan selectionColor ialah sifat yang melaluinya kita boleh menunjukkan warna pemilihan. Nilai lalai SelectionColor ialah rgba(100,100,255,0.3).

Contoh 1

Meluluskan pilihanKunci warna ke kelas

Sifat selectionColor menerima rentetan yang menentukan warna pemilihan. Kita boleh menggunakan nilai RGBA, yang bermaksud: merah, biru, hijau dan alfa. Parameter alfa menentukan kelegapan warna. Mari lihat contoh kod untuk melihat cara menetapkan warna 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 color of a selection area using FabricJs</h2>
   <p>Select an area around the object to see the color of the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionColor: "rgba(0,0,0,0.4)",
      });
      // 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 2

Menggunakan nama warna dan bukannya nilai RGBA

Kita juga boleh menggunakan warna tertentu dan bukannya nilai RGBA. Dalam contoh ini, sifat selectionColor telah ditetapkan kepada warna "merah".

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna kawasan pilihan pada kanvas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

字符串对象

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk mengembalikan HTML atau membina HTML menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk mengembalikan HTML atau membina HTML menggunakan JavaScript?

Artikel berkaitan

Lihat lagi