Home > Article > Web Front-end > FabricJS - Check if cache is dirty and polygon requires renderer?

FabricJS - Check if cache is dirty and polygon requires renderer?

王林forward: 2023-08-25 15:17:101071browse

FabricJS – 检查缓存是否脏并且多边形是否需要渲染器？

We can create Polygon objects by creating instances 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 isCacheDirty method to check whether the cache is dirty and whether a renderer is needed. This method checks if the cache is dirty, letting FabricJS know that something in the canvas has changed and needs to be re-rendered.

Grammar

isCacheDirty( skipCanvas: Boolean )

parameter

skipCanvas (optional) - This parameter accepts a Boolean value. When set to true, skips the canvas automatically. Checked since the object was drawn on the parent canvas.

Example 1: Using the isCacheDirty method

Let's look at a code example to see the output logged when using the isCacheDirty method. In this case, the polygon object's original fill color is blue. However, FabricJS marks objects as dirty and refreshes them on the next render by default. Therefore, the final color of our object is gray and the recorded 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 isCacheDirty method and dirty attribute

Let's look at a code example to see the output logged when the isCacheDirty method is used in conjunction with the dirty attribute. When set to "true", the dirty property re-renders the object's cache on the next render call. Since we have assigned a "false" value to dirty, the object's cache will not be re-rendered, so 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>

in conclusion

In this tutorial, we use two simple examples to demonstrate how to use FabricJS to check if the cache is dirty and if a polygon requires a renderer.

The above is the detailed content of FabricJS - Check if cache is dirty and polygon requires renderer?. For more information, please follow other related articles on the PHP Chinese website!

Boolean 对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Will Google crawl JavaScript that contains body content?Next article：Will Google crawl JavaScript that contains body content?

See more