Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan gaya yang mengawal sudut segi empat tepat menggunakan FabricJS?

Bagaimana untuk menetapkan gaya yang mengawal sudut segi empat tepat menggunakan FabricJS?

PHPzke hadapan: 2023-08-24 09:37:141148semak imbas

Dalam tutorial ini kita akan belajar cara menggayakan sudut kawalan Segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat segi empat tepat kita perlu mencipta contoh Fabric.Rect kelas dan tambahkannya pada kanvas.

Sudut kawalan objek membolehkan kita menskala, meregangkan atau menukar kedudukannya. Kami boleh menyesuaikan sudut kawalan dalam pelbagai cara, seperti menambah warna tertentu padanya, menukar saiznya, dsb. Kita boleh menggunakan atribut cornerStyle untuk menukar gaya.

Syntax

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

Parameter

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

Option key

cornerStyle - Hartanah ini menerima string yang membolehkan kita menentukan gaya yang kita mahu mengawal sudut.

Contoh 1

Gaya lalai sudut kawalan

Mari kita lihat contoh kod yang menunjukkan gaya lalai sudut kawalan.

<!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>Default style of controlling corners</h2>
   <p>Click on the rectangle to see the default style 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: "#3b7a57",
      });

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

Contoh

Melepasi cornerStyle sebagai kunci dengan nilai "bulatan"

Kami boleh menentukan sudut kawalan yang dipilih secara aktif Objek dengan menghantar nilai sebagai "bulatan" atau "segi empat tepat". Melepasi nilai sebagai "bulatan" akan membuat Sudut kawalan dibulatkan, seperti yang kita lakukan dalam contoh di bawah:

<!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 cornerStyle as key with the value "circle"</h2>
   <p>Click on the rectangle to see the circle style 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: "#3b7a57",
         cornerStyle: "circle",
      });

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

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya yang mengawal sudut segi empat tepat 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：Bagaimana untuk mencari semua elemen yang sepadan dengan keadaan tertentu dalam JavaScript?Artikel seterusnya：Bagaimana untuk mencari semua elemen yang sepadan dengan keadaan tertentu dalam JavaScript?

Artikel berkaitan

Lihat lagi

Bagaimana untuk menetapkan gaya yang mengawal sudut segi empat tepat menggunakan FabricJS?

Syntaxnew fabric.Rect({ cornerStyle: String }: Object)

Parameter

Option key

Contoh 1

Contoh

Artikel berkaitan

Syntax
new fabric.Rect({ cornerStyle: String }: Object)