Bagaimana untuk mengunci putaran segitiga menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mengunci putaran segitiga menggunakan FabricJS?

王林

Lepaskan： 2023-09-18 13:21:10

ke hadapan

717 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> 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.

< /ul>
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>  <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>
Salin selepas log masuk
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!