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.
new fabric.Triangle({ lockRotation : Boolean }: Object)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.
lockRotation - Hartanah ini menerima nilai Boolean. Jika kita memberikannya nilai "benar", putaran objek akan dikunci.
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>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.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk mengunci putaran segitiga menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
