Bagaimana untuk menetapkan faktor skala (sempadan) bulatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan faktor skala (sempadan) bulatan menggunakan FabricJS?

王林

Lepaskan： 2023-08-24 15:45:18

ke hadapan

760 orang telah melayarinya

如何使用 FabricJS 设置圆的比例因子（边框）？

Dalam tutorial ini, kami akan menetapkan faktor skala (sempadan) Bulatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Kita boleh menggunakan sifat borderScaleFactor untuk menentukan faktor skala objek yang mengawal sempadan.

Sintaks

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek < /em> yang menyediakan penyesuaian tambahan kepada kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang borderScaleFactor ialah harta. . Nilai lalai ialah 1.

Contoh 1

gelagat lalai bagi harta borderScaleFactorMari kita lihat contoh yang menerangkan tingkah laku lalai bagi harta borderScaleFactor. Walaupun kami menyatakannya dalam contoh ini, secara lalai borderScaleFactor akan menggunakan 1 walaupun 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>Setting the scale factor (border) of circle using FabricJS</h2>
      <p>Select the object and notice its border. Here we have set <b>borderScaleFactor</b> at 1, which is the default value. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#966fd6",
            borderScaleFactor: 1
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh 2Melalui borderScaleFactor sebagai kunciMari kita lihat kod yang meningkatkan ketebalan sempadan objek bulat apabila sempadannya dipilih secara aktif. Dalam contoh ini, kami memberikan nilai 5 kepada borderScaleFactor, yang menentukan ketebalan sempadan.

rreeee

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