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 β Check if the Cache is Dirty and Renderer is Required for a Polygon?
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 check if the cache is dirty and the renderer is required by using the isCacheDirty method. This method checks whether the cache is dirty and thus lets FabricJS know that something in our canvas has changed which requires re-rendering.
Syntax
isCacheDirty( skipCanvas: Boolean )
Parameters
skipCanvas (optional) β This parameter accepts a Boolean value which when set to true, skips canvas checks since the object is painted on the parent canvas.
Example 1: Using the isCacheDirty method
Letβs see a code example to see the logged output when the isCacheDirty method is used. In this case, the original fill colour of our polygon object is blue. However, FabricJS marks objects as dirty and refreshes them at the next render by default. Due to this, the final colour of our object is grey and the logged output is true.
<!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 isCacheDirty method</h2>
<p>
You can open console from dev tools to see that a true value is returned
</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: 250, y: 180 },
{ x: 150, y: 180 },
{ x: 150, y: 50 },
{ x: 200, y: 10 },
],
{
fill: "blue",
strokeWidth: 3,
stroke: "black",
}
);
// Adding it to the canvas
canvas.add(polygon);
// Applying a different fill colour
polygon.fill = "grey";
// Using isCacheDirty method
console.log("Is cache dirty? : ", polygon.isCacheDirty());
</script>
</body>
</html>
Example 2: Using the isCacheDirty method along with the dirty property
Letβs see a code example to see the logged output when the isCacheDirty method is used in conjunction with the dirty property. The dirty property rerenders the object's cache in the next render call when set to βtrueβ. Since we have assigned dirty a βfalseβ value, the object's cache will not be rerendered and therefore the isCacheDirty method returns a false value in the console.
<!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 isCacheDirty method along with the dirty property</h2>
<p>You can open console from dev tools to see that a false value is returned </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: 250, y: 180 },
{ x: 150, y: 180 },
{ x: 150, y: 50 },
{ x: 200, y: 10 },
],
{
fill: "blue",
strokeWidth: 3,
stroke: "black",
dirty: false,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using isCacheDirty method
console.log("Is cache dirty? : ", polygon.isCacheDirty());
</script>
</body>
</html>
Conclusion
In this tutorial, we used two simple examples to demonstrate how you can check if the cache is dirty and the renderer is required for a Polygon using FabricJS.
232 Views
To Continue Learning Please Login