Heim > Artikel > Web-Frontend > Wie implementiert man das programmgesteuerte Kopieren und Einfügen mit FabricJS?

Wie implementiert man das programmgesteuerte Kopieren und Einfügen mit FabricJS?

王林nach vorne: 2023-09-17 17:37:061137Durchsuche

如何使用 FabricJS 以编程方式实现复制粘贴？

我们可以通过创建fabric.Polygon的实例来创建一个Polygon对象。多边形对象的特征可以是由一组连接的直线段组成的任何闭合形状。由于它是 FabricJS 的基本元素之一，我们还可以通过应用角度、不透明度等属性轻松自定义它。为了以编程方式实现复制粘贴，我们需要使用 clone 方法。

语法

clone( callback: Object, propertiesToInclude: Array)

参数

Callback（可选）- 此参数是通过克隆调用的回调函数。
propertiesToInclude（可选） - 此参数包括我们希望包含在克隆画布实例中的任何其他属性。它必须是数组的形式。

示例 1：在多边形上以编程方式实现复制粘贴

让我们看一个代码示例，以了解如何以编程方式在多边形上实现复制粘贴。我们需要克隆正在复制的内容并将其添加到剪贴板，以便稍后粘贴。为此，我们在Copy()函数中使用了clone方法，该方法将克隆主动选择的对象并将其保存到剪贴板。此外，我们创建了一个 Paste() 函数，它将使用 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 copy paste programmatically on Polygon</h2>
   <p>
      You can select the object, click on copy and then click on paste button to see object duplication in action
   </p>
   <button onclick="Copy()" style="padding: 3px">copy</button>
   <button onclick="Paste()" style="padding: 3px">paste</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 Copy function which copies
      
      // the object to clipboard
      function Copy() {
         canvas.getActiveObject().clone(function (cloned) {
            _clipboard = cloned;
         });
      }
      
      // Initiating Paste function which pastes
      // the object to canvas, adds offset and 
      // makes the object active
      function Paste() {
         _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,
      });
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

示例 2：在 Circle 上以编程方式实现复制粘贴

让我们看一个代码示例，以了解如何使用 FabricJS 在圆上以编程方式实现复制粘贴。在本例中，我们启动了一个半径为 40 的圆而不是多边形对象，并将其添加到画布中。同样，Copy() 和 Paste() 函数可用于除 Polygon 之外的各种对象。

<!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 copy paste programmatically on Circle</h2>
   <p>
      You can select the object, click on copy and then click on paste button to see object duplication in action
   </p>
   <button onclick="Copy()" style="padding: 3px">copy</button>
   <button onclick="Paste()" style="padding: 3px">paste</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 Copy function which copies
      
      // the object to clipboard
      function Copy() {
         canvas.getActiveObject().clone(function (cloned) {
            _clipboard = cloned;
         });
      }
      
      // Initiating Paste function which pastes
      // the object to canvas, adds offset and
      // makes the object active
      function Paste() {
         _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,
      });
      
      // Adding it to the canvas
      canvas.add(circle);
   </script>
</body>
</html>

结论

在本教程中，我们使用两个示例来演示如何使用 FabricJS 以编程方式实现复制粘贴。

Das obige ist der detaillierte Inhalt vonWie implementiert man das programmgesteuerte Kopieren und Einfügen mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

回调函数 copy 对象 canvas fabric

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie klone ich einen bestimmten regulären Ausdruck in JavaScript?Nächster Artikel：Wie klone ich einen bestimmten regulären Ausdruck in JavaScript?

In Verbindung stehende Artikel

Mehr sehen