Bagaimana untuk menetapkan warna sudut kawalan bulatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan warna sudut kawalan bulatan menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-23 10:13:14

ke hadapan

977 orang telah melayarinya

Bagaimana untuk menetapkan warna sudut kawalan bulatan menggunakan FabricJS?

Dalam tutorial ini, kami akan menggunakan FabricJS untuk menetapkan warna sudut kawalan Bulatan. Sifat cornerColor membolehkan kita memanipulasi warna sudut kawalan apabila objek aktif.

Syntax

new fabric.Circle({ cornerColor: String }: Object)

Salin selepas log masuk

Parameter

pilihan (pilihan) - Parameter ini ialah objek yang menyediakan pilihan untuk penyesuaian tambahan bulatan. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak lagi sifat objek yang berkaitan dengan sifat cornerColor.

Option Key

cornerColor - Harta ini menerima rentetan yang membolehkan kita menetapkan warna pada sudut kawalan objek yang dipilih.

Contoh 1

Melepasi sudutWarna sebagai kunci dan menggunakan nama warna sebagai nilai

Mari dapatkan contoh menukar warna dengan menggunakan atribut cornerColor. Dalam kes ini, kami memberikan nilai "hitam" kepada kekunci, menjadikan sudut kawalan kelihatan hitam.

<!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 colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> property to set the corners black. </p>
      <canvas id="canvas"></canvas>
     
      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "black"
         });
         
         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh 2

Menetapkan nilai RGBA kepada sifat cornerColor

Kita boleh menetapkan nilai RGBA kepada nilai string kunci dan bukannya hanya menghantar nama warna yang ringkas. RGBA bermaksud merah, hijau, biru dan ketelusan (alfa). Mari lihat contoh bagaimana untuk mencapai ini −

<!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 colour of controlling corners of circle using FabricJS</h2>
      <p>Select the object and notice the color of its controlling corners. Here we have used the <b>cornerColor</b> and assigned it an "rgba" value to set the corners purple. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
            cornerColor: "rgb(255,20,147)"
         });

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna sudut kawalan bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!