FabricJS – 如何使用函数而不是构造函数来设置多边形对象的属性

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

语法

set(key: String, value: String | Boolean | Number | Object | Function)

参数

key – 这个参数接受一个字符串，指定我们要设置的属性。
value – 该参数接受要为该属性设置的值。

例1：创建 fabric.Polygon(的实例并将其添加到我们的画布上

让我们看一个代码例子，我们如何通过创建fabric.Polygon的实例来创建一个多边形。可以看出，我们通过使用构造函数添加了 “顶 “和 “左 “的属性。

<!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>
      Creating an instance of fabric.Polygon() and adding it to our canvas
   </h2>
   <p>You can see that a Polygon object has been added to the canvas</p>
   <canvas id="canvas"></canvas> 
   <script>

      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: -20, y: -35 },
            { x: 20, y: -35 },
            { x: 40, y: 0 },
            { x: 20, y: 35 },
            { x: -20, y: 35 },
            { x: -40, y: 0 },
         ],
         {
            top: 50,
            left: 50,
         }
      );

      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

例2：使用函数来设置多边形对象的属性

让我们看一个代码例子，看看当一个函数被用来设置属性时，多边形对象是什么样子。这里我们初始化了一个名为addProperties的函数，它使用set方法添加了 “stroke”、”left”、”fill”、”top “和 “selectable “属性。当我们调用该函数时，这些属性将被添加到该对象中。

<!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 a function to set the properties of Polygon object</h2>
   <p>You can see that the properties have been added</p>
   <canvas id="canvas"></canvas>
   <script>

      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiating a polygon object
      var polygon = new fabric.Polygon([
         { x: -20, y: -35 },
         { x: 20, y: -35 },
         { x: 40, y: 0 },
         { x: 20, y: 35 },
         { x: -20, y: 35 },
         { x: -40, y: 0 },
      ]);

      // Initializing addProperties function
      function addProperties(obj) {
         obj.set("stroke", "red");
         obj.set("left", 100);
         obj.set("fill", "black");
         obj.set("top", 70);
         obj.set("selectable", true);
      }

      // Calling addProperties function 
      addProperties(polygon);

      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>