Bagaimana untuk menetapkan faktor skala sempadan segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

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

WBOY

Lepaskan： 2023-08-25 08:05:02

ke hadapan

1348 orang telah melayarinya

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

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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!