简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to set styles that control the corners of a rectangle using FabricJS?

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

PHPz
PHPzforward
2023-08-24 09:37:141149browse

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)

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.

    • ul>

    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>

    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>

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!

字符串 值传递 对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to find all elements matching a specific condition in JavaScript?Next article：How to find all elements matching a specific condition in JavaScript?

Related articles

See more