Heim > Artikel > Web-Frontend > Wie erstelle ich ein geklontes Bildobjekt mit FabricJS?

Wie erstelle ich ein geklontes Bildobjekt mit FabricJS?

PHPznach vorne: 2023-08-24 09:01:25651Durchsuche

如何使用 FabricJS 创建克隆图像对象？

In diesem Tutorial zeigen wir, wie man mit ein Klonbildobjekt erstellt FabricJS. Wir können ein Image-Objekt erstellen, indem wir eine Instanz von fabric.Image erstellen. seit Es ist eines der Grundelemente von FabricJS und wir können es auch einfach über die Anwendung anpassen Winkel, Deckkraft und andere Eigenschaften. Um ein geklontes Bildobjekt zu erstellen, verwenden wir cloneAsImage-Methode.

Grammatik

cloneAsImage(callback: function, options: Object): fabric.Object

Parameter

callback (optional) – Dieser Parameter ist eine Funktion, die die geklonte Image-Instanz als erstes Aufrufargument verwendet.
Optionen (optional) – Dieser Parameter ist ein optionales Objekt, das unserem geklonten Bild zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können wir den Multiplikator festlegen, das geklonte Bild zuschneiden oder die aktuelle Objekttransformation entfernen.

Verwenden Sie nicht die cloneAsImageMethode

Beispiel

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie ein Image-Objekt beim cloneAsImage angezeigt wird Methode wird nicht verwendet. In diesem Fall erscheint eine Instanz von fabric.Image selbst in unserem Leinwand.

<!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>Without using the cloneAsImage method</h2>
   <p>You can see that the image instance has been formed</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Verwenden Sie die Methode cloneAsImage

Beispiel

In diesem Beispiel verwenden wir die Methode

cloneAsImage, um zu zeigen, dass wir es können Erstellen Sie mithilfe der Callback-Methode einen Klon der fabric.Image-Instanz. wir werden Fügen Sie das geklonte Bild weiter 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>Using the cloneAsImage method</h2>
   <p>You can see that a clone image instance has been formed</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(function(Img) {
         canvas.add(Img);
      });
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand von zwei Beispielen, wie man mit FabricJS ein geklontes Bildobjekt erstellt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein geklontes Bildobjekt mit FabricJS?. 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：Wie erstelle ich ein Diagramm aus JSON-Daten mithilfe der Fetch-API in JavaScript?Nächster Artikel：Wie erstelle ich ein Diagramm aus JSON-Daten mithilfe der Fetch-API in JavaScript?

In Verbindung stehende Artikel

Mehr sehen