Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan faktor skala sempadan segi empat tepat menggunakan FabricJS?

Bagaimana untuk menetapkan faktor skala sempadan segi empat tepat menggunakan FabricJS?

WBOYke hadapan: 2023-08-25 08:05:021354semak imbas

Dalam tutorial ini, kami akan menetapkan faktor skala sempadan bagi segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita perlu mencipta contoh fabrik.Kelas Rect dan tambahkannya pada kanvas.

Kita boleh menggunakan atribut borderScaleFactor untuk menentukan faktor skala sempadan kawalan objek.

Syntax

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

Parameter

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

Kunci pilihan

borderScaleFactor - Hartanah ini menerima nombor yang menentukan ketebalan sempadan. Nilai lalai ialah 1.

Contoh 1

Tingkah laku lalai bagi sifat borderScaleFactor

Mari kita lihat contoh kod yang menerangkan tingkah laku lalai bagi sifat borderScaleFactor. Walaupun kami telah menyatakannya dalam contoh ini, nilai lalai yang digunakan oleh borderScaleFactor masih 1 apabila tidak dinyatakan.

<!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 behaviour of borderScaleFactor property</h2>
   <p>Select the rectangle to see the default value of <b>borderScaleFactor</b></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",
         padding: 9,
         borderColor: "black",
         borderScaleFactor: 1,
      });

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

Contoh 2

Melepasi borderScaleFactor sebagai kunci

Mari lihat contoh kod untuk meningkatkan ketebalan sempadan objek segi empat tepat apabila pemilihannya diaktifkan. Dalam contoh ini, kami menetapkan borderScaleFactor kepada 5, yang menentukan ketebalan sempadan kami.

rreeee

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

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk memasukkan id secara dinamik ke dalam elemen jadual menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk memasukkan id secara dinamik ke dalam elemen jadual menggunakan JavaScript?

Artikel berkaitan

Lihat lagi