Rumah > Artikel > hujung hadapan web > FabricJS - Bagaimana untuk menetapkan warna sudut kawalan garisan?

FabricJS - Bagaimana untuk menetapkan warna sudut kawalan garisan?

王林ke hadapan: 2023-09-09 21:57:021476semak imbas

FabricJS – 如何设置线条控制角的颜色？

Dalam tutorial ini, kita akan belajar cara menetapkan warna sudut kawalan Garisan menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garisan dengan mencipta contoh fabric.Line, menyatakan koordinat X dan Y garisan dan menambahkannya pada kanvas. Sifat cornerColor membolehkan kita memanipulasi warna sudut kawalan semasa objek aktif.

Tatabahasa

new fabric.Line( points: Array, { cornerColor: String }: Object)

Parameter

points - Parameter ini menerima Array titik, yang menentukan nilai (x1, y1) dan (x2, y2), yang merupakan koordinat paksi-x dan paksi-y bagi permulaan dan akhir titik garisan masing-masing.
pilihan (pilihan) - Parameter ini ialah objek yang berguna untuk tujuan kita. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang warna sudut ialah hartanya.

Kunci pilihan

cornerColor - Sifat ini menerima String yang membolehkan kami menetapkan warna pada sudut untuk mengawal titik sudut apabila objek dipilih secara aktif. Nilai lalai ialah rgb(178,204,255).

Pass cornerColor sebagai kunci dan nama warna sebagai nilai

Contoh

Mari lihat contoh kod yang menggunakan sifat cornerColor untuk menukar warna. Dalam contoh ini, kami memberikan kunci nilai "oren", menyebabkan sudut kawalan kelihatan oren.

<!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>
      You can select the line object to see that the corner colour is orange
   </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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "orange"
      });

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

Tetapkan nilai RGBA pada atribut cornerColor

Contoh

Kami juga boleh menetapkan nilai RGBA dan bukannya menghantar nama warna ringkas kepada kekunci sebagai nilai String. 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>
      You can select the line object to see the corner 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 Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         cornerColor: "rgba(255,69,0, 0.8)",
      });

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

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

String Array 值传递对象 fabric

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menetapkan sudut kecondongan paksi-Y segi empat tepat menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan sudut kecondongan paksi-Y segi empat tepat menggunakan FabricJS?

Artikel berkaitan

Lihat lagi