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

Bagaimana untuk melumpuhkan putaran tengah elips menggunakan FabricJS?

WBOYke hadapan: 2023-08-28 09:13:111116semak imbas

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

Dalam tutorial ini, kita akan belajar cara melumpuhkan putaran berpusat 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. 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.Ellipse({ centeredRotation: Boolean }: Object)

Parameter

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

Gelagat lalai putaran elips dalam FabricJSMari kita lihat contoh yang menerangkan kelakuan lalai objek elips. Memandangkan sifat centeredRotation ditetapkan kepada "true" secara lalai, objek elips menggunakan pusatnya sebagai titik putaran. em>

<!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 disable the centered rotation of Ellipse using FabricJS?</h2>
      <p>Select the object and rotate it. The ellipse will by default rotate around its center. This is the default behavior.</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: 215,
            top: 100,
            fill: "white",
            rx: 90,
            ry: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            borderColor: "#daa520",
         });

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

Contoh 2

Melalui kunci Putaran berpusat dengan nilai "false"

Sekarang kita telah melihat gelagat lalai, mari kita lihat kod untuk memahami perkara yang berlaku apabila

centeredRotation

menetapkan nilai harta " is palsu". Di sini elips tidak lagi menggunakan pusat elips sebagai asal putaran, tetapi menggunakan salah satu sisinya. rreeee strong>

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan putaran tengah 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：Bagaimana untuk menggunakan pembolehubah sebagai kunci dalam literal objek JavaScript?Artikel seterusnya：Bagaimana untuk menggunakan pembolehubah sebagai kunci dalam literal objek JavaScript?

Artikel berkaitan

Lihat lagi