Heim > Artikel > Web-Frontend > FabricJS - Objektkopieren auf Polygonen programmgesteuert implementieren?

FabricJS - Objektkopieren auf Polygonen programmgesteuert implementieren?

WBOYnach vorne: 2023-08-24 11:05:071341Durchsuche

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

Wir können ein Polygon-Objekt erstellen, indem wir eine Instanz von fabric.Polygon erstellen. Ein Polygonobjekt kann als jede geschlossene Form charakterisiert werden, die aus einer Reihe verbundener gerader Liniensegmente besteht. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um das Kopieren von Objekten programmgesteuert zu implementieren, müssen wir die Methode „clone“ verwenden, um die Duplizierungskontrolle zu implementieren Grammatik

clone( callback: Object, propertiesToInclude: Array)

Parameter

Callback
(optional) – Dieser Parameter ist die Callback-Funktion, die durch den Klon aufgerufen wird.
propertiesToInclude
(optional) – Dieser Parameter enthält alle zusätzlichen Eigenschaften, die wir in die geklonte Canvas-Instanz aufnehmen möchten. Dies muss in Form eines Arrays erfolgen.
Beispiel 1: Programmatisches Kopieren von Objekten auf Polygon

Schauen wir uns ein Codebeispiel an, um zu verstehen, wie das Kopieren von Objekten auf Polygonen implementiert wird. Zuerst starten wir ein Polygonobjekt und sein entsprechendes Punktarray und fügen es der Zwischenablage hinzu. Wir haben auch eine Schaltfläche, die beim Klicken die Funktion

duplicate()

auslöst.

duplicate() ruft das Objekt aus der Zwischenablage ab, klont das kopierte Objekt mithilfe des Offsets und fügt es mithilfe von canvas.add zur Leinwand hinzu.

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

Beispiel 2: Programmatisches Kopieren von Objekten auf Circle

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man das Kopieren von Objekten auf einem Kreis mit FabricJS programmgesteuert implementiert. In diesem Fall haben wir mit einem Kreis anstelle eines Polygonobjekts begonnen und den gleichen Vorgang durchgeführt. Daher wird eine Kopie des Kreises erstellt.

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

Fazit

In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie man das Kopieren von Objekten mit FabricJS programmgesteuert implementiert.

Das obige ist der detaillierte Inhalt vonFabricJS - Objektkopieren auf Polygonen programmgesteuert implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：JavaScript-Programm zum Ermitteln der maximalen Summe von i*arr unter allen Rotationen eines bestimmten ArraysNächster Artikel：JavaScript-Programm zum Ermitteln der maximalen Summe von i*arr unter allen Rotationen eines bestimmten Arrays

In Verbindung stehende Artikel

Mehr sehen