How to set the color of a rectangle's control corners using FabricJS?-JS Tutorial-php.cn

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

王林

Release： 2023-09-11 12:01:22

forward

1507 people have browsed it

如何使用 FabricJS 设置矩形控制角的颜色？

In this tutorial, we will set the color of the control corners of a rectangle using FabricJS. The cornerColor property allows us to manipulate the color of the control corners while the object is active.

Syntax

new fabric.Rect({ cornerColor: 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 the color, cursor, stroke width and other properties related to the object with cornerColor as the attribute.

Option Key

cornerColor - This property accepts a String which allows us to Controls assigning color to corners when actively selecting objects. The default value is rgb(178,204,255).

Example 1

Pass cornerColor as key with color as name as value

Let's look at a code example that uses the cornerColor property to change the color. exist In this case, we assign the value "green" to the key, making The control corners appear green.

<!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 cornerColor as key with a color name as value</h2>
   <p>Select the rectangle to see the colour 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: "green",
      });

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

Copy after login

Example 2

Assign an RGBA value to the cornerColor attribute

instead of passing a simple color name as String value to key, we can also assign an RGBA value. RGBA stands for red, green, blue, and alpha, where alpha is opacity. Let's look at a code example to illustrate how to do this:

<!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>Assigning an RGBA value to the cornerColor property</h2>
   <p>Select the rectangle to see the colour 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: "rgba(34,139,34,0.9)",
      });

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

Copy after login

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