Rumah > Artikel > hujung hadapan web > Bagaimana untuk melumpuhkan putaran tengah bulatan menggunakan FabricJS?

Bagaimana untuk melumpuhkan putaran tengah bulatan menggunakan FabricJS?

PHPzke hadapan: 2023-08-31 11:21:06829semak imbas

如何使用 FabricJS 禁用圆的居中旋转？

Dalam tutorial ini, kita akan belajar cara melumpuhkan putaran tengah 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. Secara lalai, semua objek dalam FabricJS menggunakan pusatnya sebagai titik putaran. Walau bagaimanapun, kita boleh menukar tingkah laku ini menggunakan atribut centeredRotation.

Syntax

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

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan sifat lain objek yang berkaitan dengan atribut centeredRotation. . Nilai lalainya ialah
Benar

Tingkah laku lalai putaran > Bulatan dalam FabricJSMari kita lihat contoh yang menerangkan kelakuan lalai objek bulat. Memandangkan sifat centeredRotation ditetapkan kepada True secara lalai, objek bulat menggunakan pusatnya sebagai titik 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>Disabling the centered rotation of circle using FabricJs</h2>
      <p>Select the object and rotate it by holding its controlling corner at the top. The circle will rotate around its center. It is the default behavior. Here we have not used the <b>centeredRotation</b> property but it is by default set to True. </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,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
         });

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

Contoh 2

Melalui

kekunci dengan nilai "false"Sekarang kita telah melihat gelagat lalai, mari lihat sekeping kod untuk memahami perkara yang berlaku apabila atribut

ditentukan palsu . rreeee

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan putaran tengah 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：Bagaimana untuk menyahtanda butang radio menggunakan JavaScript/jQuery?Artikel seterusnya：Bagaimana untuk menyahtanda butang radio menggunakan JavaScript/jQuery?

Artikel berkaitan

Lihat lagi