Bagaimana untuk menetapkan warna sudut kawalan segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

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

王林

Lepaskan： 2023-09-11 12:01:22

ke hadapan

1533 orang telah melayarinya

如何使用 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)

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!