Heim > Artikel > Web-Frontend > Wie stelle ich mit FabricJS die Position des Bildes von oben ein?

Wie stelle ich mit FabricJS die Position des Bildes von oben ein?

WBOYnach vorne: 2023-09-20 22:57:041299Durchsuche

In diesem Tutorial erfahren Sie, wie Sie die Position eines Bildes von oben festlegen 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 Position des Bildes von oben festzulegen, verwenden wir top-Attribut.

Grammatik

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { top: Number }: Object, callback: function)

Parameter

element – Dieser Parameter akzeptiert ein HTMLImageElement, HTMLCanvasElement, HTMLVideoElement oder String, das ein Bildelement darstellt. Die Zeichenfolge sollte eine URL sein und wird als Bild geladen.
Optionen (optional) – Dieser Parameter ist ein Objekt , das eine zusätzliche Anpassung unseres Objekts ermöglicht. Mit diesem Parameter können Sie den Ursprung, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Bildobjekt verknüpft sind, dessen top das Attribut ist.
Rückruf (optional) – Dieser Parameter ist die Funktion, die aufgerufen wird, nachdem der endgültige Filter angewendet wurde.

Wahltaste

top – Diese Eigenschaft akzeptiert eine Nummer, mit der wir den Abstand festlegen können Bild-Leinwand oben.

Standarddarstellung des Bildobjekts

Beispiel

Schauen wir uns ein Codebeispiel an, um zu verstehen, wie ein Bildobjekt aussieht, wenn es top ist Eigentum nicht genutzt.

<!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>Default appearance of the Image object</h2>
   <p>You can see the default appearance of Image object</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie stelle ich mit FabricJS die Position des Bildes von oben ein?" >
   <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 an Image object
      var image = new fabric.Image(imageElement, {
         left: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Übergeben Sie das Attribut top als Schlüssel mit einem benutzerdefinierten Wert

Beispiel

In diesem Beispiel weisen wir dem Attribut top den Wert 70 zu. Dies wird sicherstellen Unser Bildobjekt wird 70 Pixel von oben platziert.

<!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>Passing the top property as key with a custom value</h2>
   <p>
      You can see that the Image object is placed at a distance of 70px from the top
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Wie stelle ich mit FabricJS die Position des Bildes von oben ein?" >
   <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 an Image object
      var image = new fabric.Image(imageElement, {
         top: 70,
         left: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie stelle ich mit FabricJS die Position des Bildes von oben ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

String 字符串 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：Erklären Sie den nicht-booleschen zu booleschen Zwang in JavaScript?Nächster Artikel：Erklären Sie den nicht-booleschen zu booleschen Zwang in JavaScript?

In Verbindung stehende Artikel

Mehr sehen