How to set the fill color of a rectangle using FabricJS?-JS Tutorial-php.cn

How to set the fill color of a rectangle using FabricJS?

WBOY

Release： 2023-09-21 08:13:24

forward

1284 people have browsed it

如何使用 FabricJS 设置矩形的填充颜色？

In this tutorial we will learn how to change the appearance of a rectangle Change the fill color of an object by using FabricJS. A rectangle is one of many shapes Powered by FabricJS. In order to create a rectangle we have to create an instance Fabric.Rect class and add it to the canvas.

We can change the fill color using the fill attribute, which allows us to specify The color of the object's fill.

Syntax

new fabric.Rect({ fill: 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 related to the object that is filled as a property.

Option Key

fill - This property accepts a String which allows us to change The fill color of the object. Its default value is rgb(0,0,0), which is black.

Example 1

Default fill color for a rectangle object

Let’s look at a code example that shows us Sets the default fill color for rectangular objects FabricJS. If we skip the fill property entirely when creating the rectangle object, it will When rendering, the fill color is black.

<!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 fill colour of a rectangle object</h2>
   <p>You can click on the rectangle and interact with it</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,
         borderColor: "purple",
         borderScaleFactor: 3,
      });

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

Copy after login

Example 2

Pass the fill attribute as key

We can also assign any color name to the fill attribute or RGBA values. In this example, We gave it a "gray" value, changing the fill color accordingly.

<!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 the fill property as key</h2>
   <p>You can see the new fill colour of rectangle object</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,
         borderColor: "purple",
         borderScaleFactor: 3,
         fill: "grey",
      });

      // 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 fill color of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!