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

Bagaimana untuk menetapkan warna latar belakang pemilihan elips menggunakan FabricJS?

PHPzke hadapan: 2023-09-10 13:13:021461semak imbas

Dalam tutorial ini, kita akan belajar cara menetapkan warna latar belakang pemilihan elips menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kita mesti mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Apabila objek dipilih secara aktif, kita boleh menukar dimensi objek, memutarkannya atau memanipulasinya. Kita boleh menukar warna latar belakang pemilihan elips menggunakan sifat selectionBackgroundColor.

Syntax

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

Parameter

Pilihan (pilihan) - Parameter ini ialah Objek menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang selectionBackgroundColor ialah harta.

Kunci pilihan

selectionBackgroundColor - Sifat ini menerima rentetan em> yang menentukan warna latar belakang pemilihan.

Contoh 1

selectionBackgroundColor atribut tidak digunakan

Mari kita ambil contoh untuk memahami cara pemilihan dipaparkan apabila atribut selectionBackgroundColor 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>How to set the background color of selection of Ellipse using FabricJS?</h2>
      <p>Select the object and you will observe that the selection background has no color. Here we have not applied the <b>selectionBackgroundColor</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

         // Adding it to the canvas
         canvas.add(ellipse);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Contoh 2

Meluluskan sifat selectionBackgroundColor sebagai kunci

Dalam contoh ini, kami menetapkan nilai kepada harta selectionBackgroundColor. Dalam kes ini, kami memberikannya warna "Biru gelap", jadi kawasan pemilihan kelihatan biru tua.

rreeee

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

字符串对象 fabric

Kenyataan：

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

Artikel sebelumnya：Apakah perbezaan antara kaedah forEach() dan map() dalam JavaScript?Artikel seterusnya：Apakah perbezaan antara kaedah forEach() dan map() dalam JavaScript?

Artikel berkaitan

Lihat lagi