FabricJS – 检查缓存是否脏且多边形是否需要渲染器?
fabricjsjavascripthtml5 canvas
我们可以通过创建 fabric.Polygon 实例来创建多边形对象。多边形对象的特征是任何由一组连接的直线段组成的封闭形状。由于它是 FabricJS 的基本元素之一,我们还可以通过应用角度、不透明度等属性轻松地对其进行自定义。
我们可以使用 isCacheDirty 方法检查缓存是否脏且是否需要渲染器。此方法检查缓存是否已脏,从而让 FabricJS 知道画布中的某些内容已更改,需要重新渲染。
语法
isCacheDirty( skipCanvas: Boolean )
参数
skipCanvas(可选) - 此参数接受 Boolean 值,设置为 true 时,将跳过画布检查,因为对象是在父画布上绘制的。
示例 1:使用 isCacheDirty 方法
让我们看一个代码示例,以查看使用 isCacheDirty 方法时记录的输出。在本例中,多边形对象的原始填充颜色为蓝色。但是,FabricJS 默认将对象标记为已脏,并在下次渲染时刷新它们。因此,我们对象的最终颜色是灰色,并且记录的输出是真实的。
<!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> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化多边形对象 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", } ); // 将其添加到画布 canvas.add(polygon); // Applying a different fill colour polygon.fill = "grey"; // Using isCacheDirty method console.log("Is cache dirty? : ", polygon.isCacheDirty()); </script> </body> </html>
示例 2:将 isCacheDirty 方法与 dirty 属性结合使用
让我们看一个代码示例,以查看当 isCacheDirty 方法与 dirty 属性结合使用时记录的输出。当设置为"true"时,dirty 属性会在下一次渲染调用中重新渲染对象的缓存。由于我们已为 dirty 分配了"false"值,因此不会重新渲染对象的缓存,因此 isCacheDirty 方法在控制台中返回 false 值。
<!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> // 启动一个canvas实例 var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // 初始化多边形对象 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, } ); // 将其添加到画布 canvas.add(polygon); // Using isCacheDirty method console.log("Is cache dirty? : ", polygon.isCacheDirty()); </script> </body> </html>
结论
在本教程中,我们使用了两个简单示例来演示如何使用 FabricJS 检查缓存是否脏以及多边形是否需要渲染器。