Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the offset amount for text path in IText using FabricJS?
In this tutorial, we are going to learn about how to set the offset amount for text in IText using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text.
Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as height is not adjusted based on the wrapping of lines. We can manipulate our IText object by using various properties. Likewise, we can specify the offset amount for our text by using the pathStartOffset property.
Syntax
new fabric.IText( text: String , { pathStartOffset: Number }: Object)
Parameters
text − This parameter accepts a String which is the text string that we want to display as our text.
options (optional) − This parameter is an Object which provides additional customizations to our IText object. Using this parameter colour, cursor, stroke width and a lot of other properties can be changed related to the IText object of which pathStartOffset is a property.
Options Keys
pathStartOffset − This property accepts a Number value which determines the offset amount for the text path starting position.
Example 1
Default appearance of text object
Let’s see a code example to see how the itext object looks like when the pathStartOffset property is not used. Here, the path has been highlighted with a blue coloured stroke. As we can see, the offset amount for the text path is null.
<!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 text object</h2> <p>You can see that offset amount for text path is null</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 path instance var path = new fabric.Path("M 0 0 C 100 -100 150 -100 300 0", { strokeWidth: 1, stroke: "blue", fill: "white", strokeWidth: 4, }); // Initiate an itext object var itext = new fabric.IText("Add sample text here.", { width: 300, left: 110, top: 70, fill: "red", path: path, }); // Add it to the canvas canvas.add(itext); </script> </body> </html>
Example 2
Passing the pathStartOffset property as key
in this example, we have passed the pathstartoffset property as key with the value as 18. hence, the offset amount will be 18.
<!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 pathStartOffset property as key</h2> <p>You can see the offset amount for text path</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 path instance var path = new fabric.Path("M 0 0 C 100 -100 150 -100 300 0", { strokeWidth: 1, stroke: "blue", fill: "white", strokeWidth: 4, }); // Initiate an itext object var itext = new fabric.IText("Add sample text here.", { width: 300, left: 110, top: 70, fill: "red", path: path, pathStartOffset: 18, }); // Add it to the canvas canvas.add(itext); </script> </body> </html>
218 Views
