Home > Article > Web Front-end > How to set the background color of a rectangle selection using FabricJS?

How to set the background color of a rectangle selection using FabricJS?

PHPzforward: 2023-08-27 14:49:151265browse

In this tutorial, we will learn how to set the background color of a rectangular selection using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we must create an instance of the Fabric.Rect class and add it to the canvas.

We can change the size of the object, rotate it or manipulate it when it is actively selected. We can use the selectionBackgroundColor property to change the background color of the rectangular selection.

Syntax

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

Parameters

Options (optional) - This parameter is a ## that provides additional customization #Object to our rectangle. Using this parameter, you can change properties such as color, cursor, stroke width, and many other properties related to the object for which the background color is selected as an attribute.

Option Key

selectionBackgroundColor - This property accepts String value. The assigned value determines the background color of the selection.

Example 1

Default color when SelectionBackgroundColor property is not used

Let's look at a code example to understand how How selection content is displayed when the

selectionBackgroundColor property is not used. From this example we can see that the selection area or the area behind the object has no color.

<!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 colour when selectionBackgroundColor property is not used</h2>
   <p>You can click on the rectangle to see that the selection area has no colour</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: 155,
         top: 70,
         width: 170,
         height: 70,
         fill: "#00b7eb",
         stroke: "#ffa089",
         strokeWidth: 5,
         padding: 50,
      });
     
      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Example 2

Passing the SelectionBackgroundColor property as a key

In this example, we assign a value to

selectionBackgroundColor property. In this case, we passed it the hexadecimal value "#e0ffff", which is light cyan, so the selection area looks that color.

<!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 selectionBackgroundColor property as key</h2>
   <p>You can click on the rectangle to see that the selection area now has a light cyan colour</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: 155,
         top: 70,
         width: 170,
         height: 70,
         fill: "#00b7eb",
         stroke: "#ffa089",
         strokeWidth: 5,
         padding: 50,
         selectionBackgroundColor: "#e0ffff",
      });
     
      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

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

String 对象 fabric

Statement：

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

Previous article：How to append data to an element using JavaScript?Next article：How to append data to an element using JavaScript?

See more

How to set the background color of a rectangle selection using FabricJS?

Syntax

Parameters

Related articles