Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 flip a Textbox horizontally using FabricJS?
In this tutorial, we are going to learn how we can flip a Textbox object horizontally using FabricJS. We can customize, stretch or move around the text written in a textbox. In order to create a textbox, we will have to create an instance of fabric.Textbox class and add it to the canvas. We can flip a textbox object horizontally using the flipX property.
Syntax
new fabric.Textbox(text: String, { flipX: Boolean }: Object) Parameters
text This parameter accepts a String which is the text string that we want to display inside our textbox.
options (optional) This parameter is an Object which provides additional customizations to our textbox. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which flipX is a property.
Options Keys
flipX This property accepts a Boolean value which allows us to flip an object horizontally.
Example 1
Passing flipX as key with a ‘false’ value
Let’s see a code example that shows us the default orientation of a textbox object in FabricJS. Since we are passing the flipX property a False value, the text will not be flipped horizontally.
<!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 flipX as key with a "false" value</h2> <p>You can see that the text has not flipped horizontally</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 textbox object var textbox = new fabric.Textbox("Each day provides its own gifts.", { backgroundColor: "#e3dac9", width: 400, left: 70, top: 70, flipX: false, }); // Create gradient fill textbox.set( "fill", new fabric.Gradient({ type: "linear", coords: { x1: 0, y1: 0, x2: 100, y2: 0 }, colorStops: [ { offset: 0, color: "#545a2c" }, { offset: 1, color: "#6495ed" }, ], }) ); // Add it to the canvas canvas.add(textbox); </script> </body> </html> Example 2
Passing the flipX property as key with a ‘true’ value
In this example, we have a textbox object of width 200px with a horizontal linear gradient fill. As we apply the flipX property to the textbox object, the text flips horizontally and thus we see that the gradient and the text has flipped as well.
<!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 flipX property as key with a ‘true’ value</h2> <p>You can see that the text has flipped horizontally</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 textbox object var textbox = new fabric.Textbox("Each day provides its own gifts.", { backgroundColor: "#e3dac9", width: 400, left: 70, top: 70, flipX: true, }); // Create gradient fill textbox.set( "fill", new fabric.Gradient({ type: "linear", coords: { x1: 0, y1: 0, x2: 100, y2: 0 }, colorStops: [ { offset: 0, color: "#545a2c" }, { offset: 1, color: "#6495ed" }, ], }) ); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
285 Views
