Fabric.js 组 statefullCache 属性

在这篇文章中，我们将看到如何设置使用Fabric.js画布的集团statefullCache。 Fabric.js 中的 Group 是可移动的，可以根据需要拉伸。此外，当涉及到初始笔画颜色、高度、宽度、填充颜色或笔画宽度时，可以自定义组。

方法：为了使它成为可能，我们将使用一个名为Fabric.js的 JavaScript 库。导入库后，我们将在包含 Group 的 body 标签中创建一个画布块。之后，我们将初始化 Fabric.js提供的 Canvas 和 Group 的实例，并使用 statefullCache属性设置是否检查对象的属性是否缓存失效。

句法：

fabric.Group([canvas1, canvas2], {
   statefullCache: Boolean
});

参数：此属性接受如上所述和如下所述的单个参数：

• statefullCache：它是一个布尔值，指定对象是否检查对象的属性以进行缓存失效。

下面的示例说明了在 JavaScript 中使用 Fabric.js Group statefullCache 属性：

例子：

HTML

  

    
    
    

  

    
        
            GeeksforGeeks
        
        
            Fabric.js | Group statefullCache Property
        
    
  
    
        
        
    
  
    
          
        // Initiate a Canvas instance
        var canvas = new fabric.Canvas("canvas");
  
        // Initiate a circle instance
        var circle = new fabric.Circle({
            radius: 100,
            fill: 'lightgreen',
            scaleY: 0.6,
            originX: 'center',
            originY: 'center'
        });
  
        // Initiate a text instance
        var text = new fabric.Text('GeeksforGeeks', {
            fontSize: 25,
            originX: 'center',
            originY: 'center'
        });
  
        // Initiate a Group instance
        var group = new fabric.Group([circle, text], {
            statefullCache: false
        });
  
        // Render the Group in canvas
        canvas.add(group);
        canvas.centerObject(group);
    

  

输出：