FabricJS – Wie zentriere ich ein Linienobjekt horizontal im aktuellen Ansichtsfenster der Leinwand?-js-Tutorial-php.cn

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

WBOY

Freigeben： 2023-09-01 13:41:02

nach vorne

1355 Leute haben es durchsucht

FabricJS – 如何将 Line 对象水平居中在画布的当前视口上？

In diesem Tutorial erfahren Sie, wie Sie mithilfe von FabricJS ein Linienobjekt horizontal 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 horizontal im aktuellen Ansichtsfenster der Leinwand zu zentrieren, verwenden wir die Methode viewportCenterH.

Grammatik

viewportCenterH(): fabric.Object

Nach dem Login kopieren

Standarddarstellung von Linienobjekten

Beispiel

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Linienobjekt aussieht, ohne die Methode viewportCenterH zu verwenden. In diesem Fall wird das Linienobjekt nicht horizontal 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 horizontally 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: 6,
      });
      
      // Add it to the canvas
      canvas.add(line);
   </script>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie die Methode viewportCenterH

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie ein Linienobjekt aussieht, wenn die Methode viewportCenterH verwendet wird. In diesem Fall wird unser Linienobjekt relativ zum aktuellen Ansichtsfenster der Leinwand horizontal 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 viewportCenterH method</h2>
   <p>
      You can see that the line object is centered horizontally 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: 6,
      });
   
      // Add it to the canvas
      canvas.add(line);
      
      // Using the viewportCenterH method
      line.viewportCenterH();
   </script>
</body>
</html>

Nach dem Login kopieren

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