Bagaimana untuk melumpuhkan putaran tengah segi empat tepat menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk melumpuhkan putaran tengah segi empat tepat menggunakan FabricJS?

王林

Lepaskan： 2023-09-09 19:13:12

ke hadapan

1101 orang telah melayarinya

Bagaimana untuk melumpuhkan putaran tengah segi empat tepat menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara melumpuhkan putaran berpusat Segiempat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta segi empat tepat, kita mesti mencipta contoh kelas Fabric.Rect 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.Rect({ centeredRotation: Boolean }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan sifat lain objek yang berkaitan dengan atribut centeredRotation.

Option key

centeredRotation - Sifat ini menerima nilai Boolean, membolehkan kami mengawal sama ada hendak menggunakan titik tengah sebagai asal transformasinya apabila objek berputar. Nilai lalainya ialah Benar.

Contoh 1

Tingkah laku lalai putaran segi empat tepat dalam FabricJS

centeredRotation

<!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>Default behaviour of rotation of Rectangle in FabricJS</h2>
   <p>Click on the rectangle and rotate it. You will notice that the object rotates around its center, which is the default behaviour.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Salin selepas log masuk

Contoh 2

Melalui kunci Putaran berpusat dengan nilai "palsu"

Sekarang kita telah melihat gelagat lalai, mari kita lihat contoh kod untuk melihat perkara yang berlaku apabila anda memberikan nilai Palsu kepada Putaran berpusat harta benda.

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan putaran tengah segi empat tepat menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!