FabricJS – Wie zentriere ich ein Linienobjekt vertikal auf der Leinwand?-js-Tutorial-php.cn

FabricJS – Wie zentriere ich ein Linienobjekt vertikal auf der Leinwand?

PHPz

Freigeben： 2023-09-03 15:17:02

nach vorne

1074 Leute haben es durchsucht

FabricJS – 如何将 Line 对象在画布上垂直居中？

In diesem Tutorial lernen wir, wie man mit FabricJS eine Linie vertikal auf einer Leinwand zentriert. 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 vertikal auf der Leinwand zu zentrieren, verwenden wir die Methode centerV.

Syntax

 centerV()

Nach dem Login kopieren

Standarddarstellung von Linienobjekten

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie unser Linienobjekt aussieht, ohne die Methode centerV zu verwenden. In diesem Fall wird das Linienobjekt 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 Line object</h2>
   <p>
      You can see that the line object has not been centered vertically 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);
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die centerVMethode

Beispiel

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonFabricJS – Wie zentriere ich ein Linienobjekt vertikal auf der Leinwand?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!