首頁 > 文章 > web前端 > FabricJS – 在多邊形上以程式設計方式實作物件複製？

FabricJS – 在多邊形上以程式設計方式實作物件複製？

WBOY轉載: 2023-08-24 11:05:071281瀏覽

FabricJS – 在多边形上以编程方式实现对象复制？

我們可以透過建立fabric.Polygon的實例來建立一個Polygon物件。多邊形物件的特徵可以是由一組連接的直線段組成的任何閉合形狀。由於它是 FabricJS 的基本元素之一，我們也可以透過應用角度、不透明度等屬性輕鬆自訂它。為了以程式設計方式實現物件複製，我們需要使用 clone 方法實作重複控制

文法

clone( callback: Object, propertiesToInclude: Array)

參數

Callback（可選） - 此參數是透過複製呼叫的回呼函數。
propertiesToInclude（可選） - 此參數包括我們希望包含在複製畫布實例中的任何其他屬性。這必須是數組的形式。

範例 1：在 Polygon 上以程式設計方式實作物件複製

讓我們看一個程式碼範例來了解如何在多邊形上實現物件複製。首先，我們啟動了一個多邊形物件及其各自的點數組並將其新增至剪貼簿。我們還有一個按鈕，點擊該按鈕會觸發 duplicate() 函數。 duplicate()將從剪貼簿取得對象，並使用偏移量複製複製的對象，並使用canvas.add將其新增至畫布。

<!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>Implementing object duplication programmatically on Polygon</h2>
   <p>
      You can click on Duplicate button to see object duplication in action
   </p>
   <button onclick="duplicate()" style="padding: 3px">Duplicate</button>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating duplicate() function which pastes
      
      // the object to canvas, adds offset and
      
      // makes the object active
      function duplicate() {
         _clipboard.clone(function (clonedObj) {
            canvas.discardActiveObject();
            clonedObj.set({
               left: clonedObj.left + 10,
               top: clonedObj.top + 10,
               evented: true,
            });
            canvas.add(clonedObj);
            _clipboard.top += 10;
            _clipboard.left += 10;
            canvas.setActiveObject(clonedObj);
            canvas.requestRenderAll();
         });
      }
      
      // Initiating a points array
      var points = [
         { x: 30, y: 50 },
         { x: 70, y: 50 },
         { x: 0, y: 0 },
         { x: 70, y: 0 },
      ];
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "#1e90ff",
         strokeWidth: 4,
         stroke: "green",
         scaleX: 2,
         scaleY: 2,
      });
      
      // Clone the object to clipboard
      polygon.clone(function (cloned) {
         _clipboard = cloned;
      });
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

範例 2：在 Circle 上以程式設計方式實作物件複製

讓我們來看一個程式碼範例，看看如何使用 FabricJS 在圓上以程式設計方式實作物件複製。在本例中，我們啟動了一個圓而不是多邊形對象，並遵循相同的過程。因此，將建立圓的副本。

<!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>Implementing object duplication programmatically on Circle</h2>
   <p>
      You can click on Duplicate button to see object duplication in action
   </p>
   <button onclick="duplicate()" style="padding: 3px">Duplicate</button>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating duplicate() function which pastes
      // the object to canvas, adds offset and
      // makes the object active
      function duplicate() {
         _clipboard.clone(function (clonedObj) {
            canvas.discardActiveObject();
            clonedObj.set({
               left: clonedObj.left + 10,
               top: clonedObj.top + 10,
               evented: true,
            });
            canvas.add(clonedObj);
            _clipboard.top += 10;
            _clipboard.left += 10;
            canvas.setActiveObject(clonedObj);
            canvas.requestRenderAll();
         });
      }
      
      // Initiating a circle object
      var circle = new fabric.Circle({
         left: 100,
         top: 40, 
         fill: "#1e90ff",
         radius: 40,
         strokeWidth: 4,
         stroke: "green",
         scaleX: 2,
         scaleY: 2,
      });
      
      // Clone the object to clipboard
      circle.clone(function (cloned) {
         _clipboard = cloned;
      });
      
      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

結論

在本教程中，我們使用兩個簡單的範例來示範如何使用 FabricJS 以程式設計方式實作物件複製。

以上是FabricJS – 在多邊形上以程式設計方式實作物件複製？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：JavaScript 程式求給定數組所有旋轉中 i*arr 的最大總和下一篇：JavaScript 程式求給定數組所有旋轉中 i*arr 的最大總和

看更多