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

fabricjsjavascripthtml5 canvas更新于 2024/9/8 22:36:17

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

语法

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

参数

options(可选)− 此参数是一个 Object，它为我们的对象提供额外的自定义。使用此参数 offsetX、跨域和许多其他与 Pattern 相关的属性都可以更改。
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>
      
    // 启动画布实例
    var canvas = new fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    canvas.setHeight(250);
    
    // 启动 createPattern 函数，加载图像
    
    // 并将图像作为图案添加到 rect 对象
      function createPattern(url) {
         fabric.util.loadImage(url, function (img) {
            rect.set(
               "fill",
               new fabric.Pattern({
                  source: img,
               })
            );
            canvas.renderAll();
         });
      }
      
      // 初始化多边形对象
      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",
         }
      );
      
    // 将其添加到画布
    canvas.add(rect);
    
    // 调用 createPattern 函数
      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>
      
    // 初始化一个画布实例
    var canvas = new fabric.Canvas("canvas");
    canvas.setWidth(document.body.scrollWidth);
    canvas.setHeight(250);
    
    // 初始化我们想要填充图案的颜色
    var imgColor = "rgba(216,228,188,0.5)";
    
    // 使用 fromURL 方法加载图像并添加到画布
    
    // 进一步设置尺寸和背景颜色
      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)
            );
            
            // 初始化一个 Pattern 对象
            var pattern = new fabric.Pattern({
               source: patternSourceCanvas.getElement(),
               repeat: "repeat",
            });
            
            // 将多边形对象添加到画布
            canvas.add(
               
               // 初始化多边形对象
               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,
                  }
               )
            );
            
            // 使用 getElementById 并定位 id 为"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>