Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan saiz sudut kawalan segi empat tepat menggunakan FabricJS?

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

WBOYke hadapan: 2023-09-21 11:17:021234semak imbas

Dalam tutorial ini kita akan belajar cara menetapkan saiz sudut kawalan Segi empat tepat menggunakan FabricJS. Sudut kawalan objek membolehkan kita membuat skala dan regangan atau menukar lokasinya.

Kami boleh menyesuaikan sudut kawalan dalam pelbagai cara, seperti menambah khusus Warnakannya, tukar saiznya dan banyak lagi. Kita boleh menggunakan cornerSize untuk menukar saiz harta benda.

Syntax

new fabric.Rect({ cornerSize: Number }: Object)

Parameter

#🎜🎜🎜##🎜🎜🎜#Pilihan ini parameter 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 cornerSize sebagai atribut.

saiz sudut# a # -🎜 properti ini diterima 🎜#number
, yang membolehkan kita memanipulasi sudut objek yang dipilih dengan mengawal saiz. Nilai lalai ialah 13. Contoh 1

Kawal saiz lalai sudut #

#🎜🎜🎜##🎜🎜🎜##🎜🎜 lihat Contoh kod yang menerangkan saiz lalai sudut kawalan Apabila objek segi empat tepat dipilih secara aktif.

<!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 size of the controlling corners</h2>
   <p>Select the rectangle to see the default size of the 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 2

Lulus

saiz sudut

sebagai kunci dengan nilai tersuai #🎜🎜🎜🎜🎜🎜 🎜#Dalam contoh ini, kami akan melepasi sifat CornerSize sebagai kunci dengan nilai 17. kami Anda boleh melihat bagaimana ia mengubah saiz sudut kawalan kami apabila objek segi empat tepat Dipilih.

<!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 cornerSize as key with a custom value</h2>
   <p>Select the rectangle to see the size of the 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",
         cornerSize: 17,
      });

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

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

Property 对象

Kenyataan：

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

Artikel sebelumnya：Program JavaScript untuk mencari jumlah tatasusunan menggunakan bitwise ATAU selepas membelah tatasusunan yang diberikan kepada dua bahagian selepas peralihan bulatan KArtikel seterusnya：Program JavaScript untuk mencari jumlah tatasusunan menggunakan bitwise ATAU selepas membelah tatasusunan yang diberikan kepada dua bahagian selepas peralihan bulatan K

Artikel berkaitan

Lihat lagi