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 vertically using FabricJS?
In this tutorial, we are going to learn how we can flip a Textbox object vertically 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 vertically using the flipY property.
Syntax
new fabric.Textbox(text: String, { flipY: 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 flipY is a property.
Options Keys
flipY This property accepts a Boolean value which allows us to flip an object vertically.
Example 1
Passing flipY 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 flipY property a "false" value, the text will not be flipped vertically.
<!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 flipY as key with a "false" value</h2> <p>You can see that the text has not flipped vertically</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("Fall seven times, stand up eight.", { backgroundColor: "#e3dac9", width: 400, left: 70, top: 70, flipY: false, }); // Create gradient fill textbox.set( "fill", new fabric.Gradient({ type: "linear", coords: { x1: 0, y1: 0, x2: 0, y2: 100 }, colorStops: [ { offset: 0, color: "#545a2c" }, { offset: 1, color: "#6495ed" }, ], }) ); // Add it to the canvas canvas.add(textbox); </script> </body> </html> Example 2
Passing the flipY property as key with a "true" value
In this example, we have a textbox object of width 200px with a vertical linear gradient fill. As we apply the flipY property to the textbox object, it flips vertically 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 flipY property as key with a "true" value</h2> <p>You can see that the text has flipped vertically</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("Fall seven times, stand up eight.", { backgroundColor: "#e3dac9", width: 400, left: 70, top: 70, flipY: true, }); // Create gradient fill textbox.set( "fill", new fabric.Gradient({ type: "linear", coords: { x1: 0, y1: 0, x2: 0, y2: 100 }, colorStops: [ { offset: 0, color: "#545a2c" }, { offset: 1, color: "#6495ed" }, ], }) ); // Add it to the canvas canvas.add(textbox); </script> </body> </html>
230 Views
