Bagaimana untuk menetapkan sudut kecondongan paksi-Y segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan sudut kecondongan paksi-Y segi empat tepat menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-09 21:33:03

ke hadapan

1274 orang telah melayarinya

如何使用 FabricJS 设置矩形 Y 轴的倾斜角度？

Dalam tutorial ini kita akan belajar cara menetapkan sudut kecondongan pada paksi-y Segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat segi empat tepat kita perlu mencipta contoh fabric.Rect kelas dan tambahkannya pada kanvas.

Objek segi empat tepat kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, Tambahkan warna latar belakang atau tukar sudut kecondongan pada paksi Y. apa yang kita boleh buat Ini dicapai menggunakan atribut skewY.

Syntax

new fabric.Rect({ skewY : 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 dikaitkan dengan objek yang mana skewY adalah atributnya.

Option Key

skewY - Sifat ini menerima nombor yang menentukan sudut kecondongan objek pada paksi-y.

Contoh 1

Apabila sifat condong tidak digunakan

Mari kita lihat contoh kod untuk melihat bagaimana segi empat tepat objek kita dipaparkan apabila sifat Dalam kes ini, kami tidak akan mempunyai sebarang kecondongan sudut dalam objek segi empat tepat kami.

<!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>When the skewY property is not applied</h2>
   <p>You can see there is no skew by any angle on the rectangle by default</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: "#8f9779",
         stroke: "#8fbc8f",
         strokeWidth: 9,
      });

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

Salin selepas log masuk

Contoh 2

Lepasi condong sebagai kunci dan tetapkan nilai tersuai.

Dalam contoh ini, kita akan melihat bagaimana untuk menetapkan nilai berangka bagi skewY harta benda. Nilai yang dilalui akan menentukan kecondongan di sepanjang paksi Y.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan sudut kecondongan paksi-Y segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!