Heim > Artikel > Web-Frontend > Wie zentriere ich ein Bildobjekt mithilfe von FabricJS horizontal im aktuellen Ansichtsfenster der Leinwand?

Wie zentriere ich ein Bildobjekt mithilfe von FabricJS horizontal im aktuellen Ansichtsfenster der Leinwand?

王林nach vorne: 2023-09-03 19:21:061395Durchsuche

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

In diesem Tutorial lernen wir, wie man ein Bildobjekt horizontal 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 Es kann auch leicht angepasst werden, indem Eigenschaften wie Winkel, Deckkraft und mehr angewendet werden. Um ein Bildobjekt horizontal im aktuellen Ansichtsfenster der Leinwand zu platzieren, verwenden wir viewportCenterH Verfahren.

Grammatik

viewportCenterH(): fabric.Object

Standarddarstellung des Bildobjekts

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, was passiert, wenn viewportCenterH Methode wird nicht verwendet. In diesem Fall wird das Bildobjekt nicht horizontal zentriert 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>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 viewportCenterHMethode

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie das Bildobjekt funktioniert Verwenden Sie die Methode viewportCenterH. In diesem Fall wird unser Bildobjekt zentriert horizontal in Bezug auf das aktuelle 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 viewportCenterH method</h2>
   <p>
      You can see that the image object is centered horizontally 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 viewportCenterH method
      image.viewportCenterH();
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand zweier Beispiele, wie man ein Bildobjekt zentriert Positionieren Sie die Leinwand mit FabricJS horizontal im aktuellen Ansichtsfenster.

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

对象 viewport 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 erstelle ich Tabs in ReactJS?Nächster Artikel：Wie erstelle ich Tabs in ReactJS?

In Verbindung stehende Artikel

Mehr sehen