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 return the dataless object representation of a Polygon using FabricJS?
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. We can return the dataless object representation of a polygon by using the toDatalessObject method. This method returns the object representation of a polygon instance.
Syntax
toDatalessObject( propertiesToInclude: Array ): Object
Parameters
propertiesToInclude (optional) − This parameter accepts an Array which allows us to add any properties that we want to include in the output. This parameter is optional.
Example 1: Using toDatalessObject Method
Let’s see a code example of how we can view the dataless object representation of a Polygon object in the console by using the toDatalessObject method.
<!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 toDatalessObject method</h2>
<p>
You can open console from dev tools and see that the logged output contains the dataless object representation of the polygon instance
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a polygon object
var polygon = new fabric.Polygon(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 },
],
{
top: 50,
left: 50,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the toDatalessObject method
console.log(
"Dataless object representation of a Polygon instance is: ",
polygon.toDatalessObject()
);
</script>
</body>
</html>
Example 2: Using toDatalessObject Method to Add Additional Properties
Let’s see a code example to see how we can include additional properties by using the toDatalessObject method. In this case, we have added a custom property called “name”. We can pass the specific property to the fabric.Polygon instance as the second argument in the options object and pass the same key to the toDatalessObject method.
<!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 toDatalessObject method to add additional properties</h2>
<p>
You can open console from dev tools and see that the logged output contains the property called name
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a polygon object with name key
// passed in options object
var polygon = new fabric.Polygon(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 },
],
{
top: 50,
left: 50,
name: "Polygon instance",
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the toDatalessObject method
console.log(
"Dataless object representation of a Polygon instance is: ",
polygon.toDatalessObject(["name"])
);
</script>
</body>
</html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can return the dataless object representation of a Polygon using FabricJS.
140 Views
