Heim >Web-Frontend >js-Tutorial >FabricJS – Wie zentriere ich ein Linienobjekt im aktuellen Ansichtsfenster der Leinwand?

FabricJS – Wie zentriere ich ein Linienobjekt im aktuellen Ansichtsfenster der Leinwand?

王林nach vorne: 2023-08-24 22:41:05745Durchsuche

FabricJS – 如何将 Line 对象置于画布当前视口的中心？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS ein Linienobjekt horizontal und vertikal im aktuellen Ansichtsfenster der Leinwand zentrieren. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von Fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um das Linienobjekt im aktuellen Ansichtsfenster der Leinwand zu zentrieren, verwenden wir die Methode viewportCenter.

Syntax

 viewportCenter(): fabric.Object

Standarddarstellung eines Linienobjekts

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Linienobjekt aussieht, wenn die Methode viewportCenter nicht verwendet wird. In diesem Fall wird das Linienobjekt 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 Line object</h2>
   <p>
      You can see that the line object is not centered with respect to the current viewport of canvas
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Verwenden Sie die viewportCenterMethode

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Linienobjekt aussieht, wenn die Methode viewportCenter verwendet wird. In diesem Fall wird unser Linienobjekt relativ zum aktuellen Ansichtsfenster 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>Using the viewportCenter method</h2>
   <p>
      You can see that the line object is centered with respect to the current viewport of canvas 
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the viewportCenter method
      line.viewportCenter();
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonFabricJS – Wie zentriere ich ein Linienobjekt im aktuellen Ansichtsfenster der Leinwand?. 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：Popup-Meldungen mithilfe von Ereignissen interpretieren?Nächster Artikel：Popup-Meldungen mithilfe von Ereignissen interpretieren?

In Verbindung stehende Artikel

Mehr sehen