Wie zentriere ich mit FabricJS ein Bildobjekt im aktuellen Ansichtsfenster der Leinwand?-js-Tutorial-php.cn

Wie zentriere ich mit FabricJS ein Bildobjekt im aktuellen Ansichtsfenster der Leinwand?

WBOY

Freigeben： 2023-08-24 19:29:02

nach vorne

1470 Leute haben es durchsucht

如何使用 FabricJS 将 Image 对象置于画布当前视口的中心？

In diesem Tutorial lernen wir, wie man ein Bildobjekt im aktuellen Ansichtsfenster zentriert Zeichnen Sie die Leinwand mit FabricJS. Wir können ein Bildobjekt erstellen, indem wir eine Instanz erstellen Stoff.Bild. Da es eines der Grundelemente von FabricJS ist, können wir es auch problemlos Passen Sie es an, indem Sie Eigenschaften wie Winkel, Deckkraft und mehr anwenden. Zum Zentrieren des Bildes Für Objekte im aktuellen Ansichtsfenster der Leinwand verwenden wir die Methode viewportCenter.

Grammatik

viewportCenter(): fabric.Object

Nach dem Login kopieren

Standarddarstellung des Bildobjekts

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, was passiert, wenn viewportCenter Methode wird nicht verwendet. In diesem Fall wird das Bildobjekt nicht 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 that the image object is not centered 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);
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die viewportCenterMethode

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie das Bildobjekt funktioniert Verwenden Sie die Methode viewportCenter. In diesem Fall wird unser Bildobjekt sein Sowohl die vertikale als auch die horizontale Richtung beziehen sich 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 viewportCenter method</h2>
   <p>
      You can see that the image object is centered 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 viewportCenter method
      image.viewportCenter();
   </script>
</body>
</html>

Nach dem Login kopieren

Fazit

In diesem Tutorial zeigen wir anhand zweier Beispiele, wie man ein Bildobjekt zentriert bzw Verwenden Sie das aktuelle Ansichtsfenster auf der FabricJS-Leinwand.

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