Home > Article > Web Front-end > FabricJS - How to set the size of a line's control angle?

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

WBOYforward: 2023-08-25 12:21:141003browse

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)

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>

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>

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!

对象 ul

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to convert string to float in JavaScript?Next article：How to convert string to float in JavaScript?

See more