如何使用FabricJS关闭Polygon对象的对象缓存

我们可以通过创建一个fabric.Polygon的实例来创建一个Polygon对象。一个多边形对象可以被描述为由一组连接的直线段组成的任何封闭形状。由于它是FabricJS的基本元素之一，我们也可以通过应用角度、不透明度等属性来轻松定制它。

一个FabricJS对象被缓存在一个额外的画布上，以便在重新使用该对象时节省时间。为了关闭Polygon对象的对象缓存，我们使用objectCaching属性。

语法

new fabric.Polygon( points: Array, { objectCaching: Boolean }: Object )

参数

points – 这个参数接受一个数组，表示构成多边形对象的点的数组，其中每个点是一个具有x和y的对象。
options (可选) – 这个参数是一个Object，为我们的对象提供额外的定制。使用这个参数可以改变与多边形对象有关的原点、笔触宽度和许多其他属性，objectCaching是该对象的一个属性。

选项键

objectCaching – 这个属性接受一个布尔值，表示该对象是否被缓存在额外的画布上。默认值是 “true”。

例1:多边形对象的默认外观

让我们看一个代码例子，当objectCaching设置为 “true “时，多边形对象如何对事件做出反应，这是默认的。FabricJS对对象进行缓存，以优化并允许对象在画布上快速绘制。

这里，我们有选择和取消选择事件，当用户选择或取消选择多边形对象时，显示填充颜色的变化。由于objectCaching被打开，选择或取消选择对象时不会有任何变化。

<!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>

例2：将objectCaching属性传给一个 “false “值

让我们看一个代码例子，看看我们如何通过传递objectCaching属性的 “false “值来停止画布对多边形对象的缓存。在这里，我们可以看到，由于objectCaching被关闭，选择和取消选择该对象会改变其填充颜色。

<!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>