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
FabricJS β How to remove the current object transform in the URL string of a Line object?
In this tutorial, we are going to learn about how to remove current object transform (scale, angle, flip, skew) in the URL string of Line object using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled.
We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to remove the current object transform in the URL string of Line object we use the withoutTransform property.
Syntax
toDataURL({ withoutTransform: Boolean }: Object): String
Parameters
options (optional) β This parameter is an Object which provides additional customizations to the URL representation of the Line object. Using this parameter height, quality, format and a lot of other properties can be changed of which withoutTransform is a property.
Options Keys
withoutTransform β This property accepts a Boolean value which allows us to get rid of the current object transform. On passing it a true value, there will no longer be scale, angle, flip or skew in the final output image.
Using the withoutTransform property and passing it a false value
Example
Letβs see a code example to see the output image when the withoutTransform property is passed a false value. As soon as we open the console from the dev tools, we can see the URL representation of the Line object. We can copy that URL and paste it into the address bar of a new tab to see the final output.
In this example, we have passed the Line object the scaleY and angle properties which assigns a vertical scale factor and an angle respectively. Thus our output will be scaled vertically with the angle of rotation being 70. However, since we have also passed the withoutTransform property a false value, our final output image will still contain the scaleY and angle properties.
<!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>Using the withoutTransform property and passing it a false value</h2> <p> You can open the console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image contains vertical scaling and has an angle of 70 degrees </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 Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, angle: 70, scaleY: 2, }); // Add it to the canvas canvas.add(line); // Using the toDataURL method console.log(line.toDataURL({ withoutTransform: false })); </script> </body> </html>
Using the withoutTransform property and passing it a true value
Example
Letβs see a code example to see how the final output image of the Line object looks like when the withoutTransform property is used and a true value is passed to it. In this case, our final output image will not contain any object transform.
<!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>Using the withoutTransform property and passing it a true value</h2> <p> You can open the console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image does not contain vertical scaling or an angle of 70 degrees </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 Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, angle: 70, scaleY: 2, }); // Add it to the canvas canvas.add(line); // Using the toDataURL method console.log(line.toDataURL({ withoutTransform: true })); </script> </body> </html>
139 Views
