Bagaimana untuk mengunci pergerakan menegak Line menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mengunci pergerakan menegak Line menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-16 09:41:06

ke hadapan

1167 orang telah melayarinya

Bagaimana untuk mengunci pergerakan menegak Line menggunakan FabricJS?

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!