Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan warna latar belakang pemilihan segi empat tepat menggunakan FabricJS?

Bagaimana untuk menetapkan warna latar belakang pemilihan segi empat tepat menggunakan FabricJS?

PHPzke hadapan: 2023-08-27 14:49:151276semak imbas

Dalam tutorial ini, kita akan belajar cara menetapkan warna latar belakang pilihan segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita mesti mencipta contoh kelas Fabric.Rect dan menambahkannya pada kanvas.

Kita boleh menukar saiz objek, memutarkannya atau mengendalikannya apabila ia dipilih secara aktif. Kita boleh menggunakan sifat selectionBackgroundColor untuk menukar warna latar belakang pilihan segi empat tepat.

Syntax

new fabric.Rect({ selectionBackgroundColor : String }: Object)

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang warna latar belakang dipilih sebagai atribut.

OptionKey

selectionBackgroundColor - Hartanah ini menerima nilai String. Nilai yang ditetapkan menentukan warna latar belakang pemilihan.

Contoh 1

Warna lalai apabila sifat SelectionBackgroundColor tidak digunakan

Mari kita lihat contoh kod untuk melihat cara pemilihan dipaparkan apabila selectionBackground propertyColor tidak digunakan. Daripada contoh ini kita dapat melihat bahawa kawasan pemilihan atau kawasan di belakang objek tidak mempunyai warna.

<!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>Default colour when selectionBackgroundColor property is not used</h2>
   <p>You can click on the rectangle to see that the selection area has no colour</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 155,
         top: 70,
         width: 170,
         height: 70,
         fill: "#00b7eb",
         stroke: "#ffa089",
         strokeWidth: 5,
         padding: 50,
      });
     
      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Contoh 2

Melalui sifat SelectionBackgroundColor sebagai kunci

Dalam contoh ini, kami menetapkan sifat nilai kepada selectionBackgroundColor. Dalam kes ini, kami memberikannya nilai perenambelasan "#e0ffff", iaitu sian terang, jadi kawasan pemilihan kelihatan warna itu.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna latar belakang pemilihan segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

String 对象 fabric

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menambahkan data pada elemen menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menambahkan data pada elemen menggunakan JavaScript?

Artikel berkaitan

Lihat lagi