How to lock vertical movement of Line using FabricJS?-JS Tutorial-php.cn

How to lock vertical movement of Line using FabricJS?

WBOY

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

forward

1166 people have browsed it

How to lock vertical movement of Line using FabricJS?

In this tutorial, we will learn how to lock the vertical movement of a Line using FabricJS. Line element is one of the basic elements provided in FabricJS. It is used to create straight lines. Since line elements are geometrically one-dimensional and contain no interiors, they are never filled. We can create a line object by creating a fabric.Line instance, specifying the x and y coordinates of the line and adding it to the canvas. We can also specify whether we want the line object to move only on the X-axis. This can be done using the lockMovementY attribute.

grammar

new fabric.Line(points: Array, { lockMovementY: Boolean }: Object)

Copy after login

parameter

points - This parameter accepts an Array of points, which determines the (x1, y1) and (x2, y2) values, respectively are the x-axis coordinates and y-axis coordinates of the starting point and end point of the line.
Options (optional) - This parameter is an object that provides additional customization to our object. Using this parameter, you can change the origin, stroke width, and many other properties associated with the object whose lockMovementY is the property.

Option key

lockMovementY - This property accepts a boolean value. If we assign it a "true" value, then the object will no longer be able to move vertically.

Default behavior of Line objects in canvas

Example

Let's look at a code example to understand how to freely move a line object on the X or Y axis when the lockMovementY property is not assigned a "true" value.

<!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>

Copy after login

Pass lockMovementY as a key with a value of "true"

Example

In this example, we will see how to lock the vertical movement of a line object. By assigning the "true" value to the lockMovementY property, we essentially stop vertical movement.

<!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>

Copy after login

The above is the detailed content of How to lock vertical movement of Line using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!