Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengunci pergerakan menegak Line menggunakan FabricJS?
Bagaimana untuk mengunci pergerakan menegak Line menggunakan FabricJS?
- WBOYke hadapan
- 2023-09-16 09:41:061137semak imbas
Dalam tutorial ini, kita akan belajar cara mengunci pergerakan menegak Garisan menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garisan dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Kita juga boleh menentukan sama ada kita mahu objek garis bergerak hanya pada paksi X. Ini boleh dilakukan menggunakan atribut lockMovementY.
Tatabahasa
new fabric.Line(points: Array, { lockMovementY: Boolean }: Object)
Parameter
points - Parameter ini menerima Array titik, yang menentukan nilai (x1, y1) dan (x2, y2), yang merupakan koordinat paksi-x dan paksi-y bagi permulaan dan akhir titik garisan masing-masing.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada objek kami. Menggunakan parameter ini, anda boleh menukar asalan, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek yang lockMovementY ialah sifat.
Kunci pilihan
lockMovementY - Hartanah ini menerima nilai boolean. Jika kita memberikannya nilai "benar", maka objek itu tidak lagi dapat bergerak secara menegak.
Tingkah laku lalai objek Garisan dalam kanvas
Contoh
Mari lihat contoh kod untuk memahami cara menggerakkan objek garis secara bebas pada paksi X atau Y apabila sifat lockMovementY tidak diberikan nilai "benar".
<!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 Line object in the canvas</h2>
<p>
Drag the line object across the x-axis and y-axis to see that movement is allowed in both directions
</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Pass lockMovementY sebagai kunci dengan nilai "benar"
Contoh
Dalam contoh ini, kita akan melihat cara mengunci pergerakan menegak objek garisan. Dengan memberikan nilai "benar" pada sifat lockMovementY, kita pada dasarnya menghentikan pergerakan menegak.
<!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>Passing lockMovementY as key with ‘true’ value</h2>
<p>
Drag the line object across the x-axis and y-axis to see that movement is no longer allowed in the vertical direction
</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 Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
lockMovementY: true,
});
// Add it to the canvas
canvas.add(line);
</script>
</body>
</html>
Atas ialah kandungan terperinci Bagaimana untuk mengunci pergerakan menegak Line menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!