Home > Article > Web Front-end > How to return a dataless object representation of a polygon using FabricJS?
How to return a dataless object representation of a polygon using FabricJS?
- WBOYforward
- 2023-08-25 18:54:46807browse
We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized as 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 such as angle, opacity, etc. We can use the toDatalessObject method to return a dataless object representation of the polygon. This method returns the object representation of the polygon instance.
grammar
toDatalessObject( propertiesToInclude: Array ): Object
parameter
propertiesToInclude (optional) - This parameter accepts an Array which allows us to add any properties to be included in the output. This parameter is optional.
Example 1: Using toDatalessObject method
Let's look at a code example of how to view the dataless object representation of a Polygon object in the console 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: Add additional properties using toDatalessObject method
Let's look at a code example to see how to include additional properties using the toDatalessObject method. In this example, we added a custom property called "name". We can pass specific properties to the fabric.Polygon instance as the second parameter in the options object and pass the same keys 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>
in conclusion
In this tutorial, we use two simple examples to demonstrate how to use FabricJS to return a dataless object representation of a polygon.
The above is the detailed content of How to return a dataless object representation of a polygon using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!