suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich mit FabricJS den oberen Versatz in einem geklonten Bild zuschneiden?

Wie kann ich mit FabricJS den oberen Versatz in einem geklonten Bild zuschneiden?

WBOY
WBOYnach vorne
2023-09-10 22:33:041610Durchsuche

如何使用 FabricJS 裁剪克隆图像中的顶部偏移？

In diesem Tutorial lernen wir, wie man den oberenVersatz 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 den oberen Versatz im geklonten Bild zuzuschneiden, haben wir Verwenden Sie das Attribut top.

Grammatik

cloneAsImage( callback: function, { top: 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 Eigenschaften ändern, von denen top eine Eigenschaft ist.

Wahltaste

  • top – Diese Eigenschaft akzeptiert einen Number-Wert, der angibt, dass top i> versetzt sein muss beschnitten werden. Dieses Attribut ist optional.

Verwenden Sie nicht das Attribut top

Beispiel

Schauen wir uns ein Codebeispiel an, um zu verstehen, wie ein geklontes Bildobjekt angezeigt wird, wenn top 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 top 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", 90);
         canvas.add(Img);
      });
   </script>
</body>
</html>

Verwenden Sie das Attribut „Top“ Beispiel

In diesem Beispiel haben wir das Attribut

top

verwendet und ihm den Wert 30 übergeben Der obere Versatz des zugeschnittenen geklonten Bildes. Daher wird der obere Teil beschnitten. 

<!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 top 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);
            canvas.add(Img);
         }, {
            top: 30,
         }
      );
   </script>
</body>
</html>
Fazit

In diesem Tutorial zeigen wir anhand zweier Beispiele, wie der obere Versatz zugeschnitten wird Bild mit FabricJS klonen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit FabricJS den oberen Versatz in einem geklonten Bild zuschneiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

number 对象 fabric
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie stelle ich mit FabricJS die Farbe eines Auswahlbereichs auf der Leinwand ein?Nächster Artikel：Wie stelle ich mit FabricJS die Farbe eines Auswahlbereichs auf der Leinwand ein?

In Verbindung stehende Artikel

Mehr sehen