cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan bagi segi empat tepat menggunakan FabricJS?

Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan bagi segi empat tepat menggunakan FabricJS?

王林
王林ke hadapan
2023-08-27 12:21:03987semak imbas

Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan bagi segi empat tepat menggunakan FabricJS?

Dalam tutorial ini kita akan belajar bagaimana untuk menetapkan nisbah minimum yang dibenarkan bagi segi empat tepat Gunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. untuk Untuk mencipta segi empat tepat kita perlu mencipta contoh kelas Fabric.Rect dan menambahnya ke kanvas.

Kami boleh menyesuaikan objek segi empat tepat dengan menambahkan warna isian, mengalih keluar jidarnya dan juga menukar dimensinya. Begitu juga, kita juga boleh menggunakan sifat minScaleLimit untuk menetapkan skala minimum yang dibenarkan.

Syntax

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

Parameter

  • Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar sempadan dan banyak sifat lain yang dikaitkan dengan objek yang minScaleLimit merupakan atribut.

Kunci Pilihan

  • minScaleLimit - Sifat ini membolehkan kami mengawal nilai skala minimum yang dibenarkan bagi segi empat tepat. Ia menerima nombor sebagai nilai.

Contoh 1

Kemunculan lalai objek segi empat tepat strong>

Mari kita lihat contoh kod untuk melihat rupa objek segi empat tepat tanpa menggunakan sifat minScaleLimit. 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>Default appearance of the rectangle object</h2>
   <p>You can try scaling the rectangle to see that there is no minimum allowed scale value.</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: 155,
         top: 90,
         width: 170,
         height: 70,
         fill: "#6f2da8",
         padding: 9,
         stroke: "#b666d2",
         strokeWidth: 5,
      });

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

Contoh 2

Meluluskan sifat minScaleLimit sebagai kunci dengan nilai tersuai

Dalam contoh ini, kita akan melihat cara memberikan nilai kepada sifat minScaleLimit mengubah nilai skala minimum yang dibenarkan bagi objek kanvas itu. Di sini kita menggunakan 0.8 sebagai nilai, yang bermaksud kita tidak akan dapat mengecilkan objek kepada kurang daripada 136 piksel lebar dan 56 piksel tinggi, yang dikira dengan had jejari* (0.8 * 170 = 136 piksel), 0.8 * 70 = 56 piksel).

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan bagi 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 mengosongkan cache menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk mengosongkan cache menggunakan JavaScript?

Artikel berkaitan

Lihat lagi