Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan warna sudut kawalan segi empat tepat menggunakan FabricJS?

Bagaimana untuk menetapkan warna sudut kawalan segi empat tepat menggunakan FabricJS?

王林ke hadapan: 2023-09-11 12:01:221477semak imbas

如何使用 FabricJS 设置矩形控制角的颜色？

Dalam tutorial ini, kami akan menetapkan warna sudut kawalan segi empat tepat menggunakan FabricJS. Sifat cornerColor membolehkan kita memanipulasi warna sudut kawalan semasa objek aktif.

Syntax

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

Parameter

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

Option Key

cornerColor - Hartanah ini menerima String yang membolehkan kami mengawal penetapan warna ke sudut objek apabila memilihnya secara aktif. Nilai lalai ialah rgb(178,204,255).

Contoh 1

Melepasi cornerColor sebagai kunci dengan warna sebagai nilai

Mari kita lihat contoh kod untuk menukar warna menggunakan sifat cornerColor. wujud Dalam kes ini, kami memberikan nilai "hijau" kepada kunci, membuat Sudut kawalan kelihatan hijau.

<!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>Passing cornerColor as key with a color name as value</h2>
   <p>Select the rectangle to see the colour of its controlling corners</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "green",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Contoh 2

Menetapkan nilai RGBA kepada atribut cornerColor

Daripada menghantar nama warna ringkas sebagai nilai String kepada kunci, kita juga boleh menetapkan nilai RGBA. RGBA bermaksud merah, hijau, biru dan alfa, dengan alfa ialah kelegapan. Mari lihat contoh kod untuk menggambarkan cara melakukan 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>Assigning an RGBA value to the cornerColor property</h2>
   <p>Select the rectangle to see the colour of its controlling corners</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: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "rgba(34,139,34,0.9)",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

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

String 对象

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk membuat pemilih masa dalam ReactJS?Artikel seterusnya：Bagaimana untuk membuat pemilih masa dalam ReactJS?

Artikel berkaitan

Lihat lagi