使用FabricJS向多边形添加带有图像和颜色的图案

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

语法

new fabric.Pattern( options: Object, callback: function )

参数

options (option) – 这个参数是一个Object，为我们的对象提供额外的定制。使用这个参数offsetX、cross-origin和许多其他与图案有关的属性可以被改变。
callback – 这个参数是一个函数，在回调初始化后被调用。这个参数是可选的。

例1：创建 fabric.Pattern()的实例并将其添加到我们的Polygon对象中

让我们看一个代码例子，看看我们如何创建一个fabric.Pattern的实例并把它添加到画布上。在这里，我们创建了一个多边形对象，它的形状是一个矩形（一个不规则的多边形）。我们已经初始化了createPattern函数，它将把图案添加到我们的矩形中。最后，我们调用了createPattern函数，并将所需的URL传给它。

<!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.Pattern() and adding it to our Polygon object
   </h2>
   <p>You can see that a pattern has been created</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 the createPattern function which loads image

      // and adds the image as pattern to the rect object
      function createPattern(url) {
         fabric.util.loadImage(url, function (img) {
            rect.set(
               "fill",
               new fabric.Pattern({
                  source: img,
               })
            );
            canvas.renderAll();
         });
      }

      // Initiating a Polygon object
      var rect = new fabric.Polygon(
         [
            { x: 0, y: 0 },
            { x: 500, y: 0 },
            { x: 500, y: 200 },
            { x: 0, y: 200 },
         ],
         {
            left: 50, 
            top: 20,
            stroke: "black",
         }
      );

      // Adding it to the canvas
      canvas.add(rect);

      // Calling the createPattern function
      createPattern("https://www.tutorialspoint.com/images/logo.png");
   </script>
</body>
</html>

例2：在我们的多边形上添加一个带有图像和颜色的图案

让我们看一个代码例子，看看我们如何为我们的多边形对象创建一个带有图像和颜色的动态图案。在这个例子中，我们使用了fromURL方法来加载图片，同时也初始化了fabric.StaticCanvas()的对象，这是FabricJS的主要渲染面之一，对于创建动态图案至关重要。

我们使用setBackgroundColor方法来设置多边形的背景颜色。最后，我们将多边形对象添加到画布上。

<!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>Adding a pattern with Image and Colour to our Polygon</h2>
   <p>You can see that a pattern with image and colour has been created and further use the number field to change the pattern density</p>
   <label>Add a width value(50-500): </label>
   <input type="number" id="changeWidth" value="50"/>
   <canvas id="canvas"></canvas>
   <script>

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

      // Initiating the colour that we want to fill the pattern with
      var imgColor = "rgba(216,228,188,0.5)";

      // Using fromURL method to load image and add to canvas

      // further setting the dimensions and background colour
      fabric.Image.fromURL(
         "https://www.tutorialspoint.com/images/logo.png",
         function (img) {
            img.scaleToWidth(100);
            img.scaleToHeight(90);
            var patternSourceCanvas = new fabric.StaticCanvas();
            patternSourceCanvas.add(img);
            patternSourceCanvas.renderAll();
            patternSourceCanvas.setBackgroundColor(
               imgColor,
               patternSourceCanvas.renderAll.bind(patternSourceCanvas)
            );

            // Initiating a Pattern object
            var pattern = new fabric.Pattern({
               source: patternSourceCanvas.getElement(),
               repeat: "repeat",
            });

            // Adding a polygon object to the canvas
            canvas.add(

               // Initiate a polygon object
               new fabric.Polygon(
                  [
                     { x: -100, y: -175 },
                     { x: 100, y: -175 },
                     { x: 200, y: 0 },
                     { x: 100, y: 175 },
                     { x: -100, y: 175 },
                     { x: -200, y: 0 },
                  ],
                  {
                     top: 30,
                     left: 10,
                     strokeWidth: 3,
                     stroke: "#96c8a2",
                     fill: pattern,
                     objectCaching: false,
                     scaleX: 0.5,
                     scaleY: 0.5,
                  }
               )
            );

            // Using getElementById and targeting the input tag with the id as "changeWidth"
            document.getElementById("changeWidth").oninput = function () {
               img.scaleToWidth(parseInt(this.value, 10));
               patternSourceCanvas.setDimensions({
                  width: img.getScaledWidth(),
                  height: img.getScaledHeight(),
               });
               canvas.requestRenderAll();
            };
         }
      );
   </script>
 </body>
</html>