Home > Article > Web Front-end > How to add spaces between characters in IText using FabricJS?

How to add spaces between characters in IText using FabricJS?

PHPzforward: 2023-09-02 12:49:08659browse

如何使用 FabricJS 在 IText 中的字符之间添加空格？

In this tutorial, we will learn how to add spaces between characters in an IText object using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.

However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Likewise, we can also add extra spaces between each character using the charSpacing property.

grammar

new fabric.IText(text: String , { charSpacing: Number }: 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 IText object. Using this parameter, you can change the color, cursor, stroke width, and many other properties of the IText object related to the charSpacing property.

Option key

charSpacing - This property accepts a number which allows us to control the extra space between characters. Expressed in units of thousands of em.

Example 1

Default appearance of IText objects

Let's look at a code example to see the default appearance of an IText object when not using the charSpacing 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>Default appearance of a IText object</h2>
   <p>You can see the default appearance of IText object when charSpacing property is not used </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 an itext object
      var itext = new fabric.IText(
         "Add Sample Text Here.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "green",
            fontStyle: "bold",
         }
      );

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

Example 2

Passing charSpacing attribute as key

In this example, we will see how to assign a value to the charSpacing property to add extra spaces between characters. In this case, we passed a value of 100, so the space will increase 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 charSpacing property as key</h2>
  <p>You can see the space between each character has increased</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 an itext object
      var itext = new fabric.IText("Add Sample Text Here.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "green",
         fontStyle: "bold",
         charSpacing: 100,
      });

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

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

String 字符串对象 fabric

Statement：

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

Previous article：Introduction to Anime.jsNext article：Introduction to Anime.js

See more