Home > Article > Web Front-end > How to set the color of a selection area on the canvas using FabricJS?

How to set the color of a selection area on the canvas using FabricJS?

王林forward: 2023-09-10 21:53:091395browse

如何使用 FabricJS 设置画布上选择区域的颜色？

In this article, we will learn how to set the color of a selection area on the canvas using FabricJS. We can adjust the color using the selectionColor property.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionColor: String }: Object)

Parameters

Element - This parameter is
Options (optional) - This parameter is an object that provides additional customization of our canvas. Using this parameter, you can change properties related to the canvas such as color, cursor, border width, and many other properties, where selectionColor is the property through which we can indicate the color of the selection. The default value of SelectionColor is rgba(100,100,255,0.3).

Example 1

Passing the selectionColor key to the class

The selectionColor property accepts a string that determines the color of the selection . We can use RGBA values, which stand for: red, blue, green, and alpha. The alpha parameter specifies the opacity of the color. Let’s look at a code example to see how to set the color of a selection in a canvas using FabricJS.

<!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>Setting the color of a selection area using FabricJs</h2>
   <p>Select an area around the object to see the color of the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionColor: "rgba(0,0,0,0.4)",
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#006400",
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Example 2

Using color names instead of RGBA values

We can also use specific colors instead of RGBA values. In this example, the selectionColor property has been set to the color "red".

<!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>Setting the color of a selection area using FabricJs</h2>
   <p>Select an area around the object to see the color of the selection area.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionColor: "red",
      });
      // Creating an instance of the fabric.Rect class
      var rect = new fabric.Rect({
         left: 170,
         top: 90,
         width: 60,
         height: 80,
         fill: "#006400",
         angle: 90,
      });
      // Adding it to the canvas
      canvas.add(rect);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

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

字符串对象

Statement：

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

Previous article：How to return HTML or build HTML using JavaScript?Next article：How to return HTML or build HTML using JavaScript?

See more

How to set the color of a selection area on the canvas using FabricJS?

Syntax

Parameters

Example 1

Example 2

Related articles