FabricJS - How to set the size of a line's control angle?-JS Tutorial-php.cn

FabricJS - How to set the size of a line's control angle?

WBOY

Release： 2023-08-25 12:21:14

forward

967 people have browsed it

FabricJS – 如何设置线的控制角的大小？

In this tutorial, we will learn how to set the size of a Line control corner using FabricJS. The control corners of an object allow us to scale, stretch or change its position. We can customize the control corner in many ways, such as adding a specific color to it, changing its size, etc. We can change the size using the cornerSize property. p>

Syntax

 new fabric.Line( points: Array, { cornerSize: Number }: Object)

Copy after login

Parameters

points - This parameter accepts an array of points, This array determines the (x1, y1) and (x2, y2) values, which are the x-axis and y-axis coordinates of the starting and ending points of the line, respectively.
options (optional) - This parameter is an object that provides additional customize. Using this parameter, you can change the object's origin, stroke width, and many other properties related to the cornerSize property.

cornerSize - This property accepts a number that allows us to manipulate the options Determines the size of the object's control angle. Its default value is 13.

Example

Let's look at an example describing the default size of control corners when a line object is actively selected.

<!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 size of the controlling corners</h2>
   <p>You can select the line object to see the default size of controlling corners</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

cornerSize as key with custom value Example

In this example, we pass the

cornerSize property as the key with a value of 17. We can see that when the line object is selected.

<!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 cornerSize as key with a custom value</h2>
   <p>You can select the line object to see the size of controlling corners</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,
         cornerColor: "#87a96b",
         cornerSize: 17,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of FabricJS - How to set the size of a line's control angle?. For more information, please follow other related articles on the PHP Chinese website!