cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mengunci putaran segitiga menggunakan FabricJS?

Bagaimana untuk mengunci putaran segitiga menggunakan FabricJS?

王林
王林ke hadapan
2023-09-18 13:21:10745semak imbas

如何使用 FabricJS 锁定三角形的旋转？

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

Syntax

new fabric.Triangle({ lockRotation : Boolean }: Object)

Parameter

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

    • Kunci Pilihan

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

    Contoh 1

    Tingkah laku lalai objek segi tiga dalam kanvas

    Mari kita lihat contoh kod untuk memahami kelakuan lalai objek segi tiga apabila atribut lockRotation tidak digunakan. Secara lalai, kita boleh memutarkan objek segi tiga 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 Triangle object in the canvas</h2>
   <p>You can select triangle and try rotating it to see the default behavior.</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 triangle object
      var triangle = new fabric.Triangle({
         left: 105,
         top: 70,
         width: 90,
         height: 80,
         fill: "#746cc0",
         stroke: "#967bb6",
         strokeWidth: 5,
      });

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

    Contoh 2

    Melepasi lockRotation sebagai kunci dengan nilai "true"

    Dalam contoh ini kita akan melihat bagaimana kita boleh menggunakan sifat lockRotation untuk mempunyai keupayaan untuk menghentikan objek segitiga daripada berputar. Seperti yang kita dapat lihat, sebaik sahaja kita cuba memutar objek segi tiga, kursor yang tidak dibenarkan dipaparkan. Ini bermakna operasi putaran tidak lagi dibenarkan.

    rreeee

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

对象 ul
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Cipta modul tersuai dalam Node.jsArtikel seterusnya：Cipta modul tersuai dalam Node.js

Artikel berkaitan

Lihat lagi