使用FabricJS向多边形添加带有图像和颜色的图案-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 22, 2023 pm 08:49 PM

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

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

语法

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

参数

options (optional) − This parameter is an Object which provides additional customizations to our object. Using this parameter offsetX, cross-origin and a lot of other properties can be changed related to the Pattern.
callback − 此参数是一个在回调初始化后调用的函数。此参数是可选的。

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

让我们看一个代码示例，看看如何创建一个 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 id="Adding-a-pattern-with-Image-and-Colour-to-our-Polygon">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>

结论

在本教程中，我们使用了两个简单的示例来演示如何使用FabricJS向多边形添加图像和颜色的模式。

以上是使用FabricJS向多边形添加带有图像和颜色的图案的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

在JavaScript中替换字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替换方法详解及常见问题解答本文将探讨两种在JavaScript中替换字符串字符的方法：在JavaScript代码内部替换和在网页HTML内部替换。在JavaScript代码内部替换字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项，需使用正则表达式并添加全局标志g： str = str.replace(/fi

自定义Google搜索API设置教程Mar 04, 2025 am 01:06 AM

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中，提供了比标准WordPress主题搜索功能更精致的搜索体验。令人惊讶的是简单！您将能够将搜索限制为Y

构建您自己的Ajax Web应用程序Mar 09, 2025 am 12:11 AM

因此，在这里，您准备好了解所有称为Ajax的东西。但是，到底是什么？ AJAX一词是指用于创建动态，交互式Web内容的一系列宽松的技术。 Ajax一词，最初由Jesse J创造

示例颜色json文件Mar 03, 2025 am 12:35 AM

本文系列在2017年中期进行了最新信息和新示例。在此JSON示例中，我们将研究如何使用JSON格式将简单值存储在文件中。使用键值对符号，我们可以存储任何类型的

8令人惊叹的jQuery页面布局插件Mar 06, 2025 am 12:48 AM

利用轻松的网页布局：8个基本插件 jQuery大大简化了网页布局。本文重点介绍了简化该过程的八个功能强大的JQuery插件，对于手动网站创建特别有用

什么是这个＆＃x27;在JavaScript？Mar 04, 2025 am 01:15 AM

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象，但具体取决于函数的调用方式。没有当前对象时，this 指代全局对象。在 Web 浏览器中，它由 window 表示。调用函数时，this 保持全局对象；但调用对象构造函数或其任何方法时，this 指代对象的实例。可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前，这句话可