Home > Article > Web Front-end > How to add shadow to textbox using FabricJS?

How to add shadow to textbox using FabricJS?

王林forward: 2023-09-12 18:33:021543browse

如何使用 FabricJS 向文本框添加阴影？

In this tutorial, we will learn how to add a shadow to a text box using FabricJS. We can customize, stretch or move the text written in the text box. In order to create a textbox, we have to create an instance of the Fabric.Textbox class and add it to the canvas. Our text box object can be customized in many ways, such as changing its dimensions, adding a background color, or even adding a shadow to it. We can add a shadow to the text box using the shadow property.

Syntax

new fabric.Textbox(text: String, { shadow : fabric.Shadow }: Object)

Parameters

text - This parameter accepts a string which is the text we are usingString Want to display in our text box.
Options (optional) - This parameter is an object that provides additional customization to our text box. Using this parameter, you can change the color, cursor, stroke width, and many other properties associated with objects whose shadow is an attribute.

Option Key

shadow - This property accepts a fabric.Shadow object that allows us to cast Add shadow to Textbox object. For example, to add a shadow to a Textbox object, we need to create a new Fabric.Shadow instance and then assign that instance to the Shadow property.

Example 1

Passing a shadow object to the shadow property

Let’s look at a code Example to see how to assign a value to the Shadow property in order to add a Shadow to our TextBox object. First, we need to create a new instance of fabric.Shadow and then assign that instance to our shadow property.

<!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 shadow object to the shadow property</h2>
   <p>You can see that a blue shadow has been added to the textbox</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "blue",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

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

Example 2

Passing RGBA values to the shadow object

We can also adjust the shadow and give it a blurry appearance by specifying a shadow RGBA values, representing red, green, blue and alpha. Alpha determines the opacity of the 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 an RGBA value to the shadow object</h2>
   <p>You can see the shadow created using RGBA colour value</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 shadow instance
      var shadow = new fabric.Shadow({
         color: "rgba(0,0,205, 0.7)",
         blur: 20,
      });

      // Initiate a textbox object
      var textbox = new fabric.Textbox("Try Again. Fail again. Fail better.", {
         backgroundColor: "#fffff0",
         width: 400,
         left: 110,
         top: 70,
         fill: "violet",
         strokeWidth: 2,
         stroke: "blue",
         textAlign: "center",
         shadow: shadow,
      });

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

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

字符串值传递对象 fabric

Statement：

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

Previous article：How to check if an IText object is populated using FabricJS?Next article：How to check if an IText object is populated using FabricJS?

See more