cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan sudut putaran elips menggunakan FabricJS?

Bagaimana untuk menetapkan sudut putaran elips menggunakan FabricJS?

PHPz
PHPzke hadapan
2023-09-10 13:29:021474semak imbas

如何使用 FabricJS 设置椭圆的旋转角度？

Dalam tutorial ini, kami akan menetapkan sudut putaran elips menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kita mesti mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Sifat sudut dalam FabricJS mentakrifkan sudut putaran 2D objek. Kami juga mempunyai sifat centeredRotation, yang membolehkan kami menggunakan titik tengah elips sebagai asal usul transformasi.

Syntax

new fabric.Ellipse({ angle: Number, centeredRotation: Boolean }: Object)

Parameter

  • Pilihan (pilihan) - Parameter ini ialah Objek menyediakan penyesuaian tambahan pada elips kami. Gunakan parameter ini untuk menukar warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan kanvas, yang mana sudut dan Putaran berpusat ialah sifat.

Kunci Pilihan

  • Sudut - Sifat ini menerima nombor yang menyatakan sudut putaran elips dalam darjah.

  • centeredRotation - Sifat ini menerima nilai Boolean yang menentukan sama ada pusat elips ialah asal usul transformasi.

Contoh 1

Lulus sudut sebagai kunci dengan nilai tersuai dan lumpuhkan putaran berpusat elips

Mari kita ambil contoh menetapkan sudut putaran elips Fabric. Sudut negatif menentukan arah lawan jam, manakala sudut positif menentukan arah jam. Memandangkan kami memberikan nilai "false" kepada centeredRotation, elips akan berputar sambil menggunakan titik sudutnya sebagai pusat putaran. 

<!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 angle of rotation of an Ellipse using FabricJS?</h2>
      <p>Select the object and rotate it. Here we have set the angle of rotation at <b>-40</b></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: 180,
            top: 180,
            rx: 90,
            ry: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -40,
            centeredRotation: false
         })

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

Contoh 2

Dayakan putaran berpusat elips

Dari contoh ini kita dapat melihat bahawa dengan menetapkan sifat centeredRotation kepada "benar", elips kita kini menggunakan pusatnya sebagai pusat putaran. Sebelum versi 1.3.4, centeredScaling dan centeredRotation terkandung dalam sifat yang dipanggil centerTransform.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan sudut putaran elips 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：Kenaikan tarikh yang diberikan dalam JavaScriptArtikel seterusnya：Kenaikan tarikh yang diberikan dalam JavaScript

Artikel berkaitan

Lihat lagi