Heim > Artikel > Web-Frontend > FabricJS - Wie zentriere ich ein Linienobjekt horizontal und vertikal auf der Leinwand?

FabricJS - Wie zentriere ich ein Linienobjekt horizontal und vertikal auf der Leinwand?

王林nach vorne: 2023-09-07 10:37:02768Durchsuche

FabricJS – 如何使 Line 对象在画布上水平和垂直居中？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS ein Linienobjekt horizontal und vertikal auf 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 horizontal und vertikal auf der Leinwand zu zentrieren, verwenden wir die Zentrierungsmethode.

Grammatik

center()

Standarddarstellung von Linienobjekten

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie unser Linienobjekt aussieht, ohne die Center-Methode zu verwenden. 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</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 Center-Methode

Beispiel

In diesem Beispiel sehen wir, wie wir mit der Mittelmethode das Linienobjekt genau in der Mitte der Leinwand platzieren können. In diesem Fall wird das Objekt horizontal und vertikal 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 center method</h2>
   <p>You can see that the line object has been centered on the 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 center() to center the line object on the canvas
      line.center();
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonFabricJS - Wie zentriere ich ein Linienobjekt horizontal und vertikal auf 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：Robotik: Bauen Sie autonome Roboter mit Raspberry Pi und JavaScriptNächster Artikel：Robotik: Bauen Sie autonome Roboter mit Raspberry Pi und JavaScript

In Verbindung stehende Artikel

Mehr sehen