Comment implémenter le copier-coller par programme à l'aide de FabricJS ?-js tutoriel-php.cn

Comment implémenter le copier-coller par programme à l'aide de FabricJS ?

王林

Libérer： 2023-09-17 17:37:06

avant

1254 Les gens l'ont consulté

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

Nous pouvons créer un objet Polygon en créant une instance de fabric.Polygon. Un objet polygone peut être caractérisé comme n’importe quelle forme fermée constituée d’un ensemble de segments de ligne droite connectés. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Afin d'implémenter le copier-coller par programme, nous devons utiliser la méthode clone.

Grammaire

clone( callback: Object, propertiesToInclude: Array)

Copier après la connexion

Paramètres

Callback (facultatif) - Ce paramètre est la fonction de rappel appelée via le clone.
propertiesToInclude (facultatif) - Ce paramètre inclut toutes les propriétés supplémentaires que nous souhaitons inclure dans l'instance de canevas clonée. Il doit se présenter sous la forme d'un tableau.

Exemple 1 : Copier-coller programmatique sur des polygones

Regardons un exemple de code pour comprendre comment implémenter le copier-coller sur des polygones par programme. Nous devons cloner ce que nous copions et l'ajouter au presse-papiers afin de pouvoir le coller plus tard. Pour ce faire, nous utilisons la méthode clone dans la fonction Copy(), qui clonera l'objet activement sélectionné et l'enregistrera dans le presse-papiers. De plus, nous avons créé une fonction Paste() qui ajoutera un objet cloné à notre canevas, dans ce cas un polygone, en utilisant 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>

Copier après la connexion

Exemple 2 : implémenter par programme le copier-coller sur Circle

Regardons un exemple de code pour comprendre comment implémenter par programme le copier-coller sur un cercle à l'aide de FabricJS. Dans ce cas, au lieu d'un objet polygone, nous avons commencé un cercle d'un rayon de 40 et l'avons ajouté au canevas. De même, les fonctions Copy() et Paste() peuvent être utilisées avec une variété d'objets en plus de 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>

Copier après la connexion