How to set opacity of rectangle using FabricJS?-JS Tutorial-php.cn

How to set opacity of rectangle using FabricJS?

WBOY

Release： 2023-09-21 08:01:09

forward

1284 people have browsed it

如何使用 FabricJS 设置矩形的不透明度？

In this tutorial, we will learn how to set the opacity of a 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 of the Fabric.Rect class and add it to

We can customize the rectangular object by adding a fill color, removing its borders, and even changing its dimensions. Likewise, we can also use the opacity property to change its opacity.

Syntax

new fabric.Rect({ opacity: Number }: 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, border width, and many other properties related to objects whose opacity is an attribute.

Option Key

opacity - This property accepts a Number which allows us to control The object's opacity. The default value of the opacity attribute is 1.

Example 1

Default Appearance of Rectangle Object

< p>Let’s look at a code example and look at our rectangle object What does the opacity property look like at its default value. In this example we are not passing any opacity key to the class as shown 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>Default appearance of a rectangle object</h2>
   <p>You can see our rectangle is fully opaque</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         padding: 9,
         stroke: "#191970",
         strokeWidth: 5,
      });

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

Copy after login

Example 2

Pass the opacity property as key

In this example we will see how to assign the value opacity property changes The opacity of the rectangular object in the canvas. Here we use 0.3 as opacity As a result, our rectangular object appears semi-transparent rather than fully opaque.

<!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 opacity property as key</h2>
   <p>You can see our rectangle is not fully opaque</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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         padding: 9,
         stroke: "#191970",
         strokeWidth: 5,
         opacity: 0.3,
      });

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

Copy after login

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