Home > Article > Web Front-end > How to implement copy-paste programmatically using FabricJS?

How to implement copy-paste programmatically using FabricJS?

王林forward: 2023-09-17 17:37:061135browse

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

We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized as any closed shape consisting of a set of connected straight line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties such as angle, opacity, etc. In order to implement copy-paste programmatically, we need to use the clone method.

grammar

clone( callback: Object, propertiesToInclude: Array)

parameter

Callback (optional) - This parameter is the callback function called through the clone.
propertiesToInclude (optional) - This parameter includes any additional properties we wish to include in the cloned canvas instance. It must be in the form of an array.

Example 1: Programmatic copy-paste on polygons

Let's look at a code example to understand how to implement copy-paste on polygons programmatically. We need to clone what we are copying and add it to the clipboard so we can paste it later. To do this, we use the clone method in the Copy() function, which will clone the actively selected object and save it to the clipboard. Additionally, we created a Paste() function that will use canvas.add to add a cloned object to our canvas, in this case a 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 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>

Example 2: Programmatically implement copy-paste on a Circle

Let’s look at a code example to understand how to programmatically implement copy-paste on a circle using FabricJS. In this case, instead of a polygon object, we started a circle with a radius of 40 and added it to the canvas. Likewise, the Copy() and Paste() functions can be used with a variety of objects besides 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>

in conclusion

In this tutorial, we use two examples to demonstrate how to implement copy-paste programmatically using FabricJS.

The above is the detailed content of How to implement copy-paste programmatically using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

回调函数 copy 对象 canvas fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to clone a given regular expression in JavaScript?Next article：How to clone a given regular expression in JavaScript?

See more