Heim > Artikel > Web-Frontend > Wie kann ich die Höhe eines geklonten Bildes mit FabricJS zuschneiden?

Wie kann ich die Höhe eines geklonten Bildes mit FabricJS zuschneiden?

WBOYnach vorne: 2023-09-05 10:05:021446Durchsuche

如何使用 FabricJS 裁剪克隆图像的高度？

In diesem Tutorial lernen wir, wie man die Höhe in einem geklonten Bild zuschneidet 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 die Höhe im geklonten Bild zuzuschneiden, verwenden wir HöheEigenschaft.

Grammatik

cloneAsImage( callback: function, { height: Number}: 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 einen Multiplikator festlegen, das geklonte Bild zuschneiden, die aktuelle Objekttransformation entfernen oder viele andere Eigenschaften ändern, von denen height eine Eigenschaft ist.

Wahltaste

height – Diese Eigenschaft akzeptiert einen Number-Wert, der das Zuschneiden angibt Höhe. Dieses Attribut ist optional.

Verwenden Sie nicht die Eigenschaft height

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein geklontes Bildobjekt angezeigt wird, wenn

height Eigentum wird nicht genutzt. In diesem Fall wird das geklonte Bild nicht zugeschnitten.

<!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 height property</h2>
   <p>You can see that no cropping has been applied to the clone image</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) {
         Img.set("top", 150);
         Img.set("left", 150);
         canvas.add(Img);
      });
   </script>
</body>
</html>

Verwenden Sie die Eigenschaft

Höhe Beispiel

In diesem Beispiel haben wir das Attribut

height

verwendet und ihm den Wert 50 übergeben Zuschneiden Höhe. Daher wird die Höhe abgeschnitten.

<!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 height property</h2>
   <p>You can see that cropping has been applied to the clone image</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) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         }, {
            height: 50,
          }
       );
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand von zwei Beispielen, wie die Höhe in einem Klon zugeschnitten wird Generieren Sie Bilder mit FabricJS.

Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe eines geklonten Bildes mit FabricJS zuschneiden?. 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：Einführung und Installation von Nightmare.jsNächster Artikel：Einführung und Installation von Nightmare.js

In Verbindung stehende Artikel

Mehr sehen