Bagaimana untuk menetapkan faktor skala menegak segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan faktor skala menegak segi empat tepat menggunakan FabricJS?

王林

Lepaskan： 2023-08-25 12:25:09

ke hadapan

1402 orang telah melayarinya

Bagaimana untuk menetapkan faktor skala menegak segi empat tepat menggunakan FabricJS?

Dalam tutorial ini kita akan belajar cara menetapkan faktor skala menegak 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.

Sama seperti kita boleh menentukan kedudukan, warna, kelegapan dan saiz objek segi empat tepat Dalam kanvas, kita juga boleh menetapkan skala menegak objek segi empat tepat. ini boleh dilakukan Dengan menggunakan atribut skalaY.

Syntax

new fabric.Rect({ scaleY : 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 lejang dan banyak sifat lain yang berkaitan dengan objek dengan skalaY sebagai atribut.

Kunci Pilihan

skalaY - Hartanah ini menerima nilai numeric. Nilai yang ditetapkan menentukan faktor skala objek menegak. Nilai lalainya ialah 1.

Contoh 1

Penampilan lalai apabila scaleY tidak digunakan

Mari kita lihat contoh kod apabila Atribut scaleY tidak digunakan. Secara lalai, faktor skala menegak bagi objek segi empat tepat ialah 1.scaleY menentukan penjelmaan yang mengubah saiz objek di sepanjang paksi Y.

<!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 when scaleY is not used</h2>
   <p>You can see that there is no scaling along the Y-axis</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: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
      });

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

Salin selepas log masuk

Contoh 2

Melalui atribut skalaY sebagai kunci

Dalam contoh ini, kami menghantar atribut skalaY sebagai kunci dengan nilai 2. ini Menunjukkan bahawa faktor skala objek segi empat tepat digandakan dalam arah menegak.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan faktor skala menegak segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!