Bagaimana untuk menetapkan nilai skala minimum yang dibenarkan bagi segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

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

王林

Lepaskan： 2023-08-27 12:21:03

ke hadapan

987 orang telah melayarinya

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)

Salin selepas log masuk

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

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>

Salin selepas log masuk

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!