Home > Article > Web Front-end > How to move the baseline of a single character in text using FabricJS?

How to move the baseline of a single character in text using FabricJS?

PHPzforward: 2023-09-01 17:05:031313browse

如何使用 FabricJS 移动文本中单个字符的基线？

In this tutorial, we will learn how to move the baseline of a single character in text using FabricJS. We can display text on the canvas by adding an instance of Fabric.Text. Not only does it allow us to move, scale and change the dimensions of text, but it also provides additional features such as text alignment, text decoration, line height, which are available through the properties textAlign, underline and lineHeight respectively. Likewise, we can also use the deltaY property to move the baseline of a single character.

grammar

new fabric.Text(text: String , { styles: { deltaY: Number}:Object }: Object)

parameter

text - This parameter accepts a String, which is the text string we want to display.
Options (optional) - This parameter is an object that provides additional customization to our text. Use this parameter to change the color, cursor, border width, and many other properties associated with the object whose style is a property.

Option key

styles - This property accepts an Object value which allows us to add styles to individual characters.
deltaY - This property accepts a Number value that allows us to move only the baseline of the style.

Example 1

Only pass styles attribute as key

In this example we can see how to add individual styles to characters using the styles attribute. As we can see in this example, only the 0th character has a fontSize of 55, a fontWeight of bold, and a fontStyle of "oblique". The first-level attribute is the line number, and the second-level attribute is the character symbol. Here we use 0 to represent the first line and first character.

<!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 styles property as key</h2>
   <p>You can see that the first character looks different now</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 text object
      var text = new fabric.Text("Add sample text here.", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
         styles: {
            0: {
               0: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fontStyle: "oblique",
               }
            }
         }
      });

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

Example 2

Pass the styles attribute as key along with the deltaY attribute

In this example, we will see how to use the deltaY property to add different baselines to characters. In this case, the second number in the first line (the first index) has a different baseline from its adjacent character because deltaY is specified.

<!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 styles property as key along with deltaY property</h2>
   <p> You can see that the second number in the first line has a different baseline </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 text object
      var text = new fabric.Text("Add sample text here. H2O", {
         width: 300,
         left: 50,
         top: 70,
         fill: "green",
         styles: {
            1: {
               0: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fill: "red",
               },
               1: {
                  deltaY: 15,
                  fill: "blue",
               },
               2: {
                  fontSize: 55,
                  fontWeight: "bold",
                  fill: "red",
               },
            },
         },
      });

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

The above is the detailed content of How to move the baseline of a single character in text using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

String Object 字符串 number 对象 fabric

Statement：

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

Previous article：Starting with the Mojs animation library: HTML componentsNext article：Starting with the Mojs animation library: HTML components

See more