Home > Article > Web Front-end > How to set the size of a rectangle's control corners using FabricJS?

How to set the size of a rectangle's control corners using FabricJS?

WBOYforward: 2023-09-21 11:17:021164browse

How to set the size of a rectangles control corners using FabricJS?

In this tutorial we will learn how to set the size of the control corners Rectangle using FabricJS. The control angle of the object allows us to scale and stretch or change its location.

We can customize the control corners in many ways, such as adding specific Color it, change its size and more. We can use cornerSize to change the size Attributes.

Syntax

new fabric.Rect({ cornerSize: Number }: Object)

Parameters

Options (optional) - This parameter is an object which is our rectangle Provides additional customization. Using this parameter, you can change the color, cursor, stroke width and other properties related to the object with cornerSize as the attribute.

Option Key

cornerSize - This property accepts a number which allows us to manipulate Controls the size of the selected object's corners. The default value is 13.

Example 1

Default size of control corners

Let us look at a code example that describes the control corners default size When a rectangular 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>Select the rectangle to see the default size of the 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Example 2

Passing cornerSize as key with custom value

In this example we will Pass cornerSize property as key with value 17. us You can see how it changes the size of our control corners when the rectangular object chosen.

<!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>Select the rectangle to see the size of the 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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#cf1020",
         borderColor: "black",
         borderScaleFactor: 3,
         cornerColor: "#3b7a57",
         cornerSize: 17,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

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

Property 对象

Statement：

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

Previous article：JavaScript program to find array sum using bitwise OR after splitting given array into two halves after K circular shiftsNext article：JavaScript program to find array sum using bitwise OR after splitting given array into two halves after K circular shifts

See more