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

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

WBOY
Release: 2023-08-25 12:21:14
forward
1033 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.

  • Options Keys< /ul>

    • 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.

    • Default size of control corners

    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!

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template