Heim >Web-Frontend >js-Tutorial >Wie kann ich mit FabricJS ein Bildobjekt vertikal im aktuellen Ansichtsfenster der Leinwand zentrieren?

Wie kann ich mit FabricJS ein Bildobjekt vertikal im aktuellen Ansichtsfenster der Leinwand zentrieren?

WBOYnach vorne: 2023-09-11 14:21:111567Durchsuche

如何使用 FabricJS 将 Image 对象在画布的当前视口上垂直居中？

In diesem Tutorial zeigen wir, wie man ein Bildobjekt vertikal zentriert Der aktuelle Ansichtsbereich der Leinwand mit FabricJS. Wir können ein Bildobjekt erstellen, indem wir Instanz von fabric.Image. Da es eines der Grundelemente von FabricJS ist, können wir es auch Passen Sie es ganz einfach an, indem Sie Eigenschaften wie Winkel, Deckkraft und mehr anwenden. Zum Zentrieren des Bildes Um das Objekt vertikal im aktuellen Ansichtsfenster der Leinwand zu positionieren, verwenden wir die Methode viewportCenterV.

Grammatik

viewportCenterV(): fabric.Object

Standarddarstellung des Bildobjekts

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie unser Image-Objekt aussieht, wenn die Methode viewportCenterV verwendet wird Nicht verwendet. In diesem Fall wird das Bildobjekt nicht vertikal auf der Leinwand zentriert.

<!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="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 an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Verwenden Sie die viewportCenterVMethode

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie das Bildobjekt funktioniert Verwenden Sie die Methode viewportCenterV. In diesem Fall wird unser Bildobjekt zentriert Vertikal relativ zum aktuellen Ansichtsfenster der 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>Using the viewportCenterV method</h2>
   <p>
      You can see that the image object is centered vertically with respect to the current viewport of canvas
   </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 an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the viewportCenterV method
      image.viewportCenterV();
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand zweier Beispiele, wie man ein Bildobjekt zentriert Mit FabricJS vertikal im aktuellen Ansichtsfenster der Leinwand anzeigen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit FabricJS ein Bildobjekt vertikal im aktuellen Ansichtsfenster der Leinwand zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

对象 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 kann ich die Ereignisweitergabe mithilfe des Inline-OnClick-Attributs in JavaScript stoppen?Nächster Artikel：Wie kann ich die Ereignisweitergabe mithilfe des Inline-OnClick-Attributs in JavaScript stoppen?

In Verbindung stehende Artikel

Mehr sehen