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

Bagaimana untuk menetapkan warna kawasan pilihan pada kanvas menggunakan FabricJS?

王林

Lepaskan： 2023-09-10 21:53:09

ke hadapan

1376 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

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>

Salin selepas log masuk

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!