How to set styles that control the corners of a rectangle using FabricJS?-JS Tutorial-php.cn

How to set styles that control the corners of a rectangle using FabricJS?

PHPz

Release： 2023-08-24 09:37:14

forward

1201 people have browsed it

How to set styles that control the corners of a rectangle using FabricJS?

In this tutorial we will learn how to style the control corners Rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle we have to create an instance Fabric.Rect class and add it to the canvas.

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 use the cornerStyle property to change the style.

Syntax

new fabric.Rect({ cornerStyle: String }: Object)

Copy after login

Parameters

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

Option Key

cornerStyle - This property accepts a string that allows us to specify The style of the control corner we want.

Example 1

Default Control Corner Style

Let’s look at a code example that shows the control corner points the default style.

<!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 style of controlling corners</h2>
   <p>Click on the rectangle to see the default style of its 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>

Copy after login

Example

Passing cornerStyle as key with value "circle"

We can specify the actively selected control horn Object by passing the value as a "circle" or "rectangle". Passing the value as a "circle" will make The control corners are rounded, as we did in the example below:

<!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 cornerStyle as key with the value "circle"</h2>
   <p>Click on the rectangle to see the circle style of its 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",
         cornerStyle: "circle",
      });

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

Copy after login

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