cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan sudut kecondongan paksi X bulatan menggunakan FabricJS?

Bagaimana untuk menetapkan sudut kecondongan paksi X bulatan menggunakan FabricJS?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBke hadapan
2023-09-10 19:41:02951semak imbas

如何使用 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)

Parameter

  • Pilihan (pilihan) - Parameter ini ialah objek 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.

    • ul>

    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>

    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!

对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Program JavaScript untuk menjana semua putaran nomborArtikel seterusnya：Program JavaScript untuk menjana semua putaran nombor

Artikel berkaitan

Lihat lagi