Bagaimana untuk menetapkan warna latar belakang pemilihan segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

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

PHPz

Lepaskan： 2023-08-27 14:49:15

ke hadapan

1275 orang telah melayarinya

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

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)

Salin selepas log masuk

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< /strong>

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>

Salin selepas log masuk

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!