Home > Article > Web Front-end > How to add spaces between characters in IText using FabricJS?
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.
new fabric.IText(text: String , { charSpacing: Number }: Object)
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.
charSpacing - This property accepts a number which allows us to control the extra space between characters. Expressed in units of thousands of em.
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>
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!