Maison > Article > interface Web > FabricJS - Implémenter par programme la copie d'objets sur des polygones ?

FabricJS - Implémenter par programme la copie d'objets sur des polygones ?

WBOYavant: 2023-08-24 11:05:071281parcourir

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 la copie d'objets par programme, nous devons utiliser la méthode clone pour implémenter le contrôle de duplication

Grammaire

clone( callback: Object, propertiesToInclude: Array)

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. Cela doit être sous la forme d’un tableau.

Exemple 1 : Copie d'objet programmatique sur Polygon

Regardons un exemple de code pour comprendre comment implémenter la copie d'objets sur des polygones. Tout d’abord, nous démarrons un objet polygone et son tableau de points respectif et l’ajoutons au presse-papiers. Nous avons également un bouton qui, lorsqu'on clique dessus, déclenche la fonction duplicate(). duplicate() récupèrera l'objet du presse-papiers, clonera l'objet copié en utilisant le décalage et l'ajoutera au canevas 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 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>

Exemple 2 : Implémenter par programme la copie d'objet sur Circle

Regardons un exemple de code pour voir comment implémenter par programme la copie d'objets sur un cercle à l'aide de FabricJS. Dans ce cas, nous avons commencé avec un cercle au lieu d'un objet polygone et avons suivi le même processus. Une copie du cercle sera donc créée.

<!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>

Conclusion

Dans ce didacticiel, nous utilisons deux exemples simples pour montrer comment implémenter par programme la copie d'objets à l'aide de FabricJS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Programme JavaScript pour trouver la somme maximale de i*arr parmi toutes les rotations d'un tableau donnéArticle suivant：Programme JavaScript pour trouver la somme maximale de i*arr parmi toutes les rotations d'un tableau donné

Articles Liés

Voir plus