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
Switch Off Object Caching for Polygon Object in Fabric.js
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.
A FabricJS object is cached on an additional canvas for saving time during re-using the object. In order to switch off object caching for Polygon object we use the objectCaching property.
Syntax
new fabric.Polygon( points: Array, { objectCaching: Boolean }: Object )
Parameters
points ? This parameter accepts an Array which denotes the array of points that make up the polygon object where each point is an object with x and y.
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 Polygon object of which objectCaching is a property.
Options Keys
objectCaching ? This property accepts a Boolean value which denotes whether the object is cached on additional canvas or not. The default value is "true".
Example 1: Default Appearance of Polygon Object
Let's see a code example of how the polygon object reacts to events when objectCaching is set to "true", which is the default. FabricJS caches objects in order to optimize and allow objects to be quickly drawn on the canvas.
Here, we have selected and deselected events to display a change in fill colour when the user selects or deselects the polygon object. Since objectCaching is turned on, there will be no change on selecting or deselecting the 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>Default appearance of polygon object</h2>
<p>
You can select and deselect the object to see that the fill colour does not change
</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 polygon object
var polygon = new fabric.Polygon(
[
{ x: 0, y: 0 },
{ x: 0, y: 80 },
{ x: 80, y: 80 },
{ x: 80, y: 0 },
],
{
left: 100,
fill: "black",
stroke: "blue",
strokeWidth: 2,
scaleX: 2,
scaleY: 2,
}
);
// Add it to the canvas
canvas.add(polygon);
// Using the selected event
polygon.on("selected", () => {
polygon.fill = "blue";
canvas.renderAll();
});
// Using the deselected event
polygon.on("deselected", () => {
polygon.fill = "black";
canvas.renderAll();
});
</script>
</body>
</html>
Example 2: Passing objectCaching Property a "false" Value
Let's see a code example to see how we can stop the canvas from caching the polygon object by passing objectCaching property a "false" value. Here, we can see, since objectCaching is turned off, selecting and deselecting the object changes its fill colour.
<!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 objectCaching property a "false" value</h2>
<p>
You can select and deselect the object to see that the fill colour changes
</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 polygon object
var polygon = new fabric.Polygon(
[
{ x: 0, y: 0 },
{ x: 0, y: 80 },
{ x: 80, y: 80 },
{ x: 80, y: 0 },
],
{
left: 100,
fill: "black",
stroke: "blue",
strokeWidth: 2,
scaleX: 2,
scaleY: 2,
objectCaching: false,
}
);
// Add it to the canvas
canvas.add(polygon);
// Using the selected event
polygon.on("selected", () => {
polygon.fill = "blue";
canvas.renderAll();
});
// Using the deselected event
polygon.on("deselected", () => {
polygon.fill = "black";
canvas.renderAll();
});
</script>
</body>
</html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can switch off object caching for a Polygon object using FabricJS.
529 Views
