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 include a Line object's default values in its serialization?
In this tutorial, we are going to learn how to include Line object’s default values in its serialization 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. Serialization is used in order to export canvas contents. In order to achieve this, we convert the object to JSON. The includeDefaultValues property allows us to include or omit the object’s default values when being serialized.
Syntax
new fabric.Line(points: Array ,{ includeDefaultValues: Boolean }: Object)
Parameters
points − This parameter accepts an Array of points which determines the (x1, y1) and (x2, y2) values, those being the x- and y-axis coordinates of the start and end of the line respectively.
options (optional) − This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the object of which includeDefaultValues is a property
Options Keys
includeDefaultValues − This property accepts a Boolean value. On passing a false value, the default values of the line object are not included in its serialization.
Using includeDefaultValues property and passing the value as "true"
Example
Let’s see a code example to see the logged output when the includeDefaultValues property is assigned a true value. In this case, we can see in our console that the object’s serialization includes default properties like "angle":0, "shadow":null, "opacity":1, "visible":true etc.
<!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 includeDefaultValues property and passing the value as "true"</h2> <p> You can open console from dev tools and see the default values of the serialized line object </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, includeDefaultValues: true, }); // Add it to the canvas canvas.add(line); // Using JSON.stringify method to serialize the canvas console.log(JSON.stringify(canvas)); </script> </body> </html>
Using includeDefaultValues property and passing the value as "false"
Example
In this example, we will see how by using the includeDefaultValues property and passing it a false value, we can omit the inclusion of the default values in the serialized line object.
<!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 includeDefaultValues property and passing the value as "false"</h2> <p> You can open console from dev tools and see that the default values have been omitted from the serialized line object </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, includeDefaultValues: false, }); // Add it to the canvas canvas.add(line); // Using JSON.stringify method to serialize the canvas console.log(JSON.stringify(canvas)); </script> </body> </html>
71 Views
