Bagaimana untuk menetapkan sudut putaran bulatan menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan sudut putaran bulatan menggunakan FabricJS?

王林

Lepaskan： 2023-09-14 08:57:23

ke hadapan

1548 orang telah melayarinya

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

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

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> menyediakan penyesuaian tambahan pada objek kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan sifat lain yang berkaitan dengan bulatan, dengan sudut dan Putaran berpusat ialah sifat. p>

Kunci Pilihan

Sudut - Sifat ini menerima nombor yang menentukan sudut putaran bulatan dalam darjah.
centeredRotation - Hartanah ini menerima nilai boolean yang menentukan sama ada pusat bulatan ialah asal usul transformasi.

Contoh 1

Sudut lulus sebagai kunci dengan nilai tersuai dan lumpuhkan putaran berpusat bulatan

Contoh berikut menunjukkan cara menetapkan sudut putaran bulatan dalam FabricJS. Sudut negatif menentukan arah lawan jam, manakala sudut positif menentukan arah jam. Memandangkan kami telah menetapkan nilai False untuk centeredRotation, bulatan akan berputar sambil menggunakan titik sudutnya sebagai pusat putaran. Contoh 2 Sebelum versi 1.3.4,

centeredScaling

dan

centeredRotation

terkandung dalam sifat yang dipanggil centerTransform.

<!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>Set the angle of rotation of a Circle using FabricJS</h2>
      <p>Select the object and observe its controlling corners. You will notice that the angle of rotation is set at 60 degrees in the anti-clockwise direction, as we have set the <b>angle</b> at <b>-60</b>. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var cir = new fabric.Circle({
            left: 215,
            top: 100,
            radius: 50,
            fill: "green",
            stroke: "blue",
            strokeWidth: 2,
            angle: -60,
            centeredRotation: false,
         });

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menetapkan sudut putaran bulatan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!