首頁 > 文章 > web前端 > 使用FabricJS向多邊形添加帶有圖像和顏色的圖案

使用FabricJS向多邊形添加帶有圖像和顏色的圖案

WBOY轉載: 2023-08-22 20:49:021203瀏覽

我們可以透過建立一個 fabric.Polygon 的實例來建立一個多邊形物件。多邊形物件可以由一組相連的直線段組成的任何封閉形狀來描述。由於它是FabricJS的基本元素之一，我們也可以透過套用屬性如角度、不透明度等來輕鬆地自訂它。為了讓多邊形添加圖案和顏色，我們可以使用FabricJS中的Pattern類別。

語法

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

參數

options (optional) − This parameter is an 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>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.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在原生ES6 Promise中使用Typescript？下一篇：如何在原生ES6 Promise中使用Typescript？

看更多