Bagaimana untuk menetapkan nilai perkadaran minimum yang dibenarkan bagi elips menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan nilai perkadaran minimum yang dibenarkan bagi elips menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-08 16:25:02

ke hadapan

575 orang telah melayarinya

如何使用 FabricJS 设置椭圆的最小允许比例值？

Dalam tutorial ini, kita akan belajar cara menetapkan bahagian minimum elips yang dibenarkan menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kami akan mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Kita boleh menyesuaikan objek elips dengan menambahkan warna isian, mengalih keluar sempadannya dan juga menukar dimensinya. Begitu juga, kita juga boleh menggunakan sifat minScaleLimit untuk menetapkan skala minimum yang dibenarkan.

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> menyediakan penyesuaian tambahan pada elips kami. Gunakan parameter ini untuk menukar warna, kursor, lebar jidar dan banyak sifat lain yang dikaitkan dengan objek yang minScaleLimit ialah harta.

Option Key

minScaleLimit - Hartanah ini menerima nombor sebagai nilai yang membolehkan kita mengawal skala minimum yang dibenarkan untuk elli.

Contoh 1

Cara objek elips lalai

Mari kita ambil contoh untuk melihat rupa objek elips tanpa menggunakan atribut 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>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2>
      <p>Here you can select the object and scale it up freely to any extent, as we have not used the <b>minScaleLimit</b> property. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

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

Salin selepas log masuk

Contoh 2

Melalui 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 lebih kecil daripada jejari mendatar 64 piksel dan jejari menegak 40 piksel, dikira sebagai radius*limit (0.8 * 80 = 64 piksel , 0.8 * 50 = 40 piksel ).
rreeee
Atas ialah kandungan terperinci Bagaimana untuk menetapkan nilai perkadaran minimum yang dibenarkan bagi elips menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!