Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan untuk Bulatan menggunakan FabricJS?

Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan untuk Bulatan menggunakan FabricJS?

WBOYke hadapan: 2023-09-05 15:25:09956semak imbas

Dalam tutorial ini, kita akan belajar cara menetapkan nisbah minimum yang dibenarkan bagi 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 menyesuaikan objek bulat dengan menambahkan warna isian, mengalih keluar sempadannya dan juga menukar dimensinya. Begitu juga, kita juga boleh menggunakan atribut minScaleLimit untuk menetapkan skala minimum yang dibenarkan.

Syntax

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

Parameter

#🎜#🎜 pilihan (pilihan #🎜#🎜) # - Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar jidar dan banyak sifat lain yang dikaitkan dengan objek yang minScaleLimit ialah hartanya.
Kunci pilihan

nombor sebagai nilai yang membolehkan kami mengawal bahagian minimum bulatan yang dibenarkan. Contoh 1 strong>
Kemunculan objek bulat lalai

minScaleLimit

tidak digunakan. Dalam kes ini, kita akan dapat menskalakan objek secara bebas kerana tiada had minimum ditetapkan.

<!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 minimum allowed scale value of circle using FabricJS</h2>
      <p>Select the object and scale it down by dragging one of its controlling corners. Here you can scale down the object freely since there is no minimum limit set.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#ff1493"
         });

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

Contoh 2

Lulus atribut

minScaleLimit sebagai kunci dengan nilai tersuai ini ##🎜 kita akan melihat cara memberikan nilai kepada sifat minScaleLimit

mengubah nilai skala minimum yang dibenarkan untuk objek bulat dalam kanvas. Di sini kita menggunakan 0.8 sebagai nilai, yang bermaksud kita tidak akan dapat mengecilkan objek kepada jejari lebih kecil daripada 64 piksel, yang dikira dengan

jejari * had

(0.8 * 80 = 64 piksel ).

<!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 minimum allowed scale value of circle using FabricJS</h2>
      <p>Select the object and try to scale it down by dragging one of its controlling corners. You cannot scale down the object freely, as we have set <b>minScaleLimit</b> at 0.8. So, the minimum scale of the circle must be at least 80% of the original radius, beyond which you cannot scale it down any further. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 80,
            fill: "#ff1493",
            minScaleLimit: 0.8
         });

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

Atas ialah kandungan terperinci Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan untuk Bulatan 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 mengulangi fungsi ke kedalaman n dalam JavaScript?Artikel seterusnya：Bagaimana untuk mengulangi fungsi ke kedalaman n dalam JavaScript?

Artikel berkaitan

Lihat lagi