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

Bagaimana untuk mengunci putaran segi empat tepat menggunakan FabricJS?

王林

Lepaskan： 2023-08-24 19:29:08

ke hadapan

1223 orang telah melayarinya

Bagaimana untuk mengunci putaran segi empat tepat menggunakan FabricJS?

Dalam tutorial ini, kita akan belajar cara mengunci putaran segi empat tepat menggunakan FabricJS. Sama seperti kita boleh menentukan kedudukan, warna, kelegapan dan saiz objek segi empat tepat dalam kanvas, kita juga boleh menentukan sama ada ia diputarkan. Ini boleh dilakukan menggunakan atribut lockRotation.

Syntax

new fabric.Rect({ lockRotation : 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 sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang lockRotation merupakan atribut.

Kunci Pilihan

lockRotation - Hartanah ini menerima nilai Boolean. Jika kita memberikannya nilai "benar", putaran objek akan dikunci.

Contoh 1

Gelagat Lalai Objek Segi Empat dalam Kanvas

Mari kita lihat contoh kod untuk memahami gelagat lalai objek segi empat tepat apabila tidak menggunakan sifat lockRotation. Secara lalai, kita boleh memutarkan objek segi empat tepat mengikut lawan jam atau mengikut arah jam.

<!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 a Rectangle object in the canvas</h2>
   <p>You can try rotating the rectangle to see 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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "black",
         padding: 9,
         stroke: "#483d8b",
         strokeWidth: 5,
      });

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

Salin selepas log masuk

Contoh 2

Melalui lockRotation sebagai kunci dengan nilai True

Dalam contoh ini kita akan melihat cara menghentikan fungsi objek segi empat tepat daripada berputar menggunakan sifat lockRotation. Seperti yang kita dapat lihat, sebaik sahaja kita cuba memutar objek segi empat tepat, kursor dipaparkan yang tidak dibenarkan. Ini bermakna operasi putaran tidak lagi dibenarkan.

rreeee

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