Bagaimana untuk menetapkan sudut kecondongan paksi X bulatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan sudut kecondongan paksi X bulatan menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-10 19:41:02

ke hadapan

859 orang telah melayarinya

如何使用 FabricJS 设置圆的 X 轴倾斜角度？

Dalam tutorial ini, kita akan belajar cara menetapkan sudut kecondongan paksi-X bulatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kami akan mencipta contoh kelas fabric.Circle dan menambahkannya pada kanvas. Objek bulatan kami boleh disesuaikan dalam pelbagai cara, seperti menukar dimensinya, menambah warna latar belakang atau dengan menukar sudut kecondongan pada paksi X. Kita boleh melakukannya dengan menggunakan atribut skewX.

Syntax

new fabric.Circle({ skewX : Number }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang skewX ialah atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.

Kunci pilihan

skewX - Sifat ini menerima nombor yang menentukan sudut kecondongan pada paksi X objek.

Contoh 1

>Apabila sifat skewX tidak digunakan

Mari kita lihat contoh untuk melihat bagaimana objek bulat kita muncul apabila sifat skewX tidak digunakan. Dalam kes ini, objek bulat kami tidak akan diherotkan pada sebarang sudut.

<!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>Setting the angle of skew on X-axis of circle using FabricJS</h2>
      <p>Here we have not applied the <b>skewX</b> property, hence there is no distortion in the object. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 50,
            top: 90,
            radius: 50,
            fill: "#ccccff",
            stroke: "#7b68ee",
            strokeWidth: 5
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Salin selepas log masuk

Contoh 2

Lepasi skewX sebagai kunci dan tetapkan nilai tersuai.

Dalam contoh ini, kita akan melihat cara menetapkan nilai berangka bagi sifat skewX. Nilai yang dilalui akan menentukan putaran sepanjang paksi X. Memandangkan kami telah memberikan sifat skewX nilai 30, kesannya seolah-olah objek bulat itu dicubit secara mendatar untuk mencipta sudut 30 darjah.
rreeee
Atas ialah kandungan terperinci Bagaimana untuk menetapkan sudut kecondongan paksi X bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!